如何从服务器而不是缓存加载图像？

Question

我的网站上有一些图片会不时更改。

问题是浏览器从缓存中加载了旧图像。

如何让浏览器始终从服务器而不是缓存加载图像？

Answer 1

你可以做的是在 src="img.jpg" 上使用一种版本控制，并使用这样的

  <img src="img.jpg?12354636512">

12354636512 这个数字应该是不同的，所以你可以使用当前时间，例如将这些独特的版本添加到你的图像 url。浏览器会认为这与它已经下载到临时文件的内容不同，并会再次请求它。

Answer 2

您可以更改图像的 src 以包含无用的随机数：

EDIT: use a current timestamp instead to ensure it's never the same, but basically do the same thing.

var imgs = document.getElementsByClassName('yourimageclassname');

for (var i = 0; i < imgs.length; i++) {
  var num = Math.random();
  imgs[i].src = imgs[i].src + '?' + num;
}

document.getElementById('result').value = imgs[0].src;

<input type="text" id="result" style="width:100%;" />

<img class="yourimageclassname" src="http://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" />

Answer 3

这取决于您使用的网络服务器，nginx、apache2、node...

在此 Web 服务器的配置中，只需为图像（png、jpg）设置一个控件。 Nginx：

location ~* \.(js|css)$ {
        expires 1d;
    }

一个小的变通方法是每次在图像上附加一个新字符串（基于时间），这样浏览器就会将图像视为新图像：<img src="picture.jpg?20130910043254">

如何从服务器而不是缓存加载图像？

How to load image from the server rather than the cache?

html

image

browser-cache