<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- Tocas UI：CSS 與元件 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tocas-ui/2.3.3/tocas.css">
<!-- Tocas JS：模塊與 JavaScript 函式 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/tocas-ui/2.3.3/tocas.js"></script>
<script>
function fun(){
falg = 1;
$.get( "/abc", function( st ) {
if(st != "warning\n")
{
flag = 1;
}
if(st == "warning\n" && flag == 1)
{
ts('#closableModal').modal("show");
flag = 0;
}
});
}
var timeoutID = window.setInterval(( () => fun() ), 1000);
</script>
<style type="text/css">
.ts.segment {
margin: 0 auto;
width: 500px;
}
.button {
border: 0 !important
}
</style>
</head>
<body>
<div class="ts modals dimmer">
<dialog id = "closableModal" class="ts fullscreen modal" open>
<div class="header">
這是你嗎？
</div>
<div class="image content">
<div class="ts medium image">
<img src ="http://localhost:8000/images/file.jpg">
</div>
<div class="description">
<div class="ts header">我們在照片中偵測到了你。</div>
<p>這張照片看起來裡面包含著你的人像，如果你願意的話我們可以自動將該照片發佈至 <a href="https://www.gravatar.com" target="_blank">gravatar</a> 並替換你原先的頭像。</p>
<p>你希望這麼做嗎？</p>
</div>
</div>
<div class="actions">
<button class="ts positive button">
是的
</button>
</div>
</dialog>
</div>
</body>
</html>
這是我的html程式碼，fun()執行ts('#closableModal').modal("show");後按下是的就會關閉，直到下一次再度被執行，而closableModal裡頭的img是位於電腦中的一個檔案。
此檔案會隨著程式的運行而更新，新jpg圖檔會覆蓋舊檔案，所以此路徑永遠只有一個檔案，但我發現圖檔已經被新圖檔覆蓋了但網頁上顯示的永遠都是舊圖片，請問這該怎麼解決呢？
已邀請的邦友 {{ invite_list.length }}/5
我比較懶，只會用亂數操作，以下用php演示
<img src="img/aaa.jpg?p=<?php echo rand(1000); ?>">
我承認這不正規，但，這是保証能避開快取的最簡單方法
1000可能會花生重覆的現象的話(1000的2次方=100萬耶)，加大一點OK的啦，9位數也沒問題
請問為何我這樣還是無法解決cache的問題
<img src ="http://localhost/images/file.jpg?p=<?php echo rand(1000000); ?>">
我在瀏覽器輸入"http://localhost/images/file.jpg" 這樣的連結是可以看到電腦中絕對路徑的jpg檔，透過以下python程式
@get('/images/<filename:re:.*\.jpg>')
def send_image(filename):
return static_file(filename, root='Path', mimetype='image/jpeg')
而且若此路徑的圖檔有被覆蓋掉，我在瀏覽器重新整理就可以看到新圖片，但在網頁上就是始終都顯示舊圖片，請問我有哪個地方出了問題嗎？
你在那個圖片目錄下加一個 .htaccess 檔(假設你用的是apache2)
放進以下，內容你自己按現實狀況改一下
#Initialize mod_rewrite
RewriteEngine On
<FilesMatch "\.(html|htm|js|css)$">
FileETag None
<IfModule mod_headers.c>
Header unset ETag
Header set Cache-Control "max-age=0, no-cache, no-store, must-revalidate"
Header set Pragma "no-cache"
Header set Expires "Wed, 12 Jan 1980 05:00:00 GMT"
</IfModule>
</FilesMatch>
會有cache
網路圖片最好的做法是不要用覆蓋的
每次都用不同檔名
Web Server 的檔案 Cache 控制方法:
給開發者的網頁技術文件 > HTTP > HTTP caching
這比較不正規拉
但是如果存取這個圖片不會用到get參數的話
可以在show()之前
往原本的網址後面加一個不重複的gat參數
比如這樣：
oldSrc = $("#imgId").attr('src');
imagePath = oldSrc.split('?')[0];
let newSrc = imagePath + "?time=" + new Date().getTime();
$("#imgId").attr('src', newSrc);
就會因為網址不同而重新load圖片
iThome鐵人賽
看影片追技術