如何動態顯示 URL 中的圖像並避免瀏覽器快取？

顯示具有URL 快取的動態影像

考慮從特定URL 擷取影像的場景，確保每次存取都會產生唯一的影像。但是，當嘗試更新頁面上的圖像時，圖像將保持不變，除非重新載入頁面。

用於影像顯示的JavaScript 程式碼

以下JavaScript 程式碼說明影像顯示和刷新機制：

var newImage = new Image();
newImage.src = "http://localhost/image.jpg";

function updateImage() {
  if (newImage.complete) {
    document.getElementById("theText").src = newImage.src;
    newImage = new Image();
    newImage.src = "http://localhost/image/id/image.jpg?time=" + new Date();
  }

  setTimeout(updateImage, 1000);
}

在給定的場景中，由於瀏覽器可能將圖像緩存在以下位置，因此圖像不會更新指定的網址。這會阻止瀏覽器取得最新的圖像版本。

克服快取問題

要強制刷新映像，可以在 URL 後附加快取破壞器。這將確保瀏覽器直接從伺服器獲取圖像，而不是依賴快取的版本。修改後的程式碼將包括：

newImage.src = "http://localhost/image.jpg?" + new Date().getTime();

此新增可確保每次建立映像時將當前時間戳附加到 URL。因此，瀏覽器將從伺服器檢索映像，而不是存取快取的版本。透過新增此快取破壞器，頁面上的圖像將動態更新，反映伺服器提供的最新版本。

以上是如何動態顯示 URL 中的圖像並避免瀏覽器快取？的詳細內容。更多資訊請關注PHP中文網其他相關文章！