如何动态显示 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中文网其他相关文章！