iT邦幫忙

0

為何指定的圖片已經不一樣了網頁顯示卻還是舊圖片?

<!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圖檔會覆蓋舊檔案,所以此路徑永遠只有一個檔案,但我發現圖檔已經被新圖檔覆蓋了但網頁上顯示的永遠都是舊圖片,請問這該怎麼解決呢?

vc0528 iT邦新手 5 級 ‧ 2021-09-22 17:03:14 檢舉
有一個變數拼錯字

function fun(){
falg = 1;
xxx65819 iT邦新手 5 級 ‧ 2021-09-24 10:45:20 檢舉
謝謝
2
japhenchen
iT邦大師 1 級 ‧ 2021-09-22 11:32:01
最佳解答

我比較懶,只會用亂數操作,以下用php演示

<img src="img/aaa.jpg?p=<?php echo rand(1000); ?>">

我承認這不正規,但,這是保証能避開快取的最簡單方法

看更多先前的回應...收起先前的回應...

1000可能會花生重覆的現象的話(1000的2次方=100萬耶),加大一點OK的啦,9位數也沒問題

xxx65819 iT邦新手 5 級 ‧ 2021-09-23 15:41:57 檢舉

請問為何我這樣還是無法解決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>

tomcat in server.xml


<Context className="org.apache.catalina.core.StandardContext"
                 cachingAllowed="false"
                 charsetMapperClass="org.apache.catalina.util.CharsetMapper"
                 cookies="true" 
                 reloadable="false" 
                 wrapperClass="org.apache.catalina.core.StandardWrapper">
        </Context>
xxx65819 iT邦新手 5 級 ‧ 2021-09-24 10:42:55 檢舉

謝謝

1
firecold
iT邦新手 2 級 ‧ 2021-09-21 16:36:29

會有cache
網路圖片最好的做法是不要用覆蓋的
每次都用不同檔名

xxx65819 iT邦新手 5 級 ‧ 2021-09-21 16:57:20 檢舉

如果真的有必要用覆蓋的,請問該怎麼做才能改善chche的問題?

3
Hankz
iT邦新手 3 級 ‧ 2021-09-21 18:40:08

這比較不正規拉
但是如果存取這個圖片不會用到get參數的話
可以在show()之前
往原本的網址後面加一個不重複的gat參數
比如這樣:

oldSrc = $("#imgId").attr('src');
imagePath = oldSrc.split('?')[0];
let newSrc = imagePath + "?time=" + new Date().getTime();
$("#imgId").attr('src', newSrc);

就會因為網址不同而重新load圖片

DEMO

echochio iT邦高手 1 級 ‧ 2021-09-21 20:23:04 檢舉

只要解決問題不是嗎?
加個時間變數最快 + 1

+1 簡易處理

xxx65819 iT邦新手 5 級 ‧ 2021-09-24 10:45:37 檢舉

謝謝

我要發表回答

立即登入回答