Html 有没有办法强制浏览器刷新/下载图像？

Is there a way to force browsers to refresh/download images?

提问by uriDium

I have a problem where users are reporting that their images aren't being uploaded and the old ones are still there. On closer inspection the new images are there, they just have the same name as the old one. What I do on the upload is that I rename the images for SEO purposes. When they delete an image the old index becomes available and is reused. Therefore it has the same image name.

我有一个问题，用户报告他们的图像没有上传，而旧的图像仍然存在。仔细检查后，新图像就在那里，它们只是与旧图像同名。我在上传时所做的是出于搜索引擎优化的目的重命名图像。当他们删除图像时，旧索引变得可用并被重用。因此它具有相同的图像名称。

Is there a way to (i thought maybe there might be a meta tag for this) to tell the browser to not use its cahce?

有没有办法（我想可能会有一个元标记）告诉浏览器不要使用它的 cahce？

The better answer is to rename the image to something totally new. I will get working on that but in the mean time is the quick solution while I work on the bigger problem.

更好的答案是将图像重命名为全新的名称。我会着手解决这个问题，但同时也是解决更大问题的快速解决方案。

回答by knittl

Append a query string with an arbitrary unique number (or time, or version number, etc.):

附加具有任意唯一编号（或时间、或版本号等）的查询字符串：

<img src="image.png?80172489074" alt="a cool image" />

This will result in a new request, because of the different URL.

由于不同的 URL，这将导致一个新的请求。

回答by ndp

It's tough. You really want images to be cached, but then you don't want to cache them once a new ones available:

这很难。您确实希望缓存图像，但是一旦有新图像可用，您就不想缓存它们：

• Using expires header with a date in the past prevents any caching. Bad
• Adding a "cache busting" parameter ?342038402 can fix the problem, but can also prevent the image ever from being cached, which is not what you want. Bad.
• Using expires header with a short (lets say 1 hr) expires is better... after an hour the user will see the image, but your web server won't have to serve it every time. Compromise, but what time works? Not really feasible.

• 使用带有过去日期的 expires 标头可防止任何缓存。坏的
• 添加“缓存破坏”参数 ?342038402 可以解决问题，但也可以防止图像被缓存，这不是您想要的。坏的。
• 使用带有短（比如说 1 小时）的 expires 标头会更好……一小时后用户将看到图像，但您的 Web 服务器不必每次都提供它。妥协，但什么时间有效？不太可行。

The solution? I can think of two good options:

解决方案？我能想到两个不错的选择：

• Look into eTags, and your ability to use them. These are designed for this situation. The browser will explicitly ask your server whether the file is up-to-date or not. You can just turn this on in apache if you don't have it aleady.
• Create a new URL for each new image (and use a far-future expires header). This is what you are working on.

• 查看电子标签，以及您使用它们的能力。这些是为这种情况而设计的。浏览器将明确询问您的服务器文件是否是最新的。如果你没有它，你可以在 apache 中打开它。
• 为每个新图像创建一个新 URL（并使用远期到期标头）。这就是你正在做的事情。

回答by Rob Vanders

Append the current datetime to the image src:

将当前日期时间附加到图像 src：

<img src="yourImage.png?v=<?php echo Date("Y.m.d.G.i.s")?>" />

回答by samuil

You can put http-equivin <meta>tag which will tell browser not to use cache (or even better -- use it in some defined way), but it is better to configure server to send proper http cacheheaders. Check out article on caching.

你可以把http-equiv在<meta>标签，它会告诉浏览器不使用缓存（甚至更好-在某些定义的方式来使用它），但它是更好地配置服务器发送正确的HTTPcache报头。查看有关缓存的文章。

Still, some browsers might not support all of httpstandard, but I believe it's the way to go.

尽管如此，一些浏览器可能不支持所有http标准，但我相信这是要走的路。

回答by Aaron Digulla

If you look at the data that is exchanged between your browser and the server, you'll see that the browser will send a HTTP HEAD request for the images. The result will contain the modification time (but not the actual image data). Make sure that this time changes if the image changes on the server and the browser should download the image again.

如果您查看浏览器和服务器之间交换的数据，您会看到浏览器将发送图像的 HTTP HEAD 请求。结果将包含修改时间（但不包含实际图像数据）。如果服务器上的图像发生变化并且浏览器应再次下载图像，请确保此时间发生变化。

回答by RageZ

you can control the cache behaviour by playing with the HTTP headers.

您可以通过使用 HTTP 标头来控制缓存行为。

setting the expires header in past would force browser to not use cached version.

过去设置 expires 标头会强制浏览器不使用缓存版本。

Expires: Sat, 26 Jul 1997 05:00:00 GMT

You can consult the RFCto have more details.

您可以查阅RFC以获取更多详细信息。

回答by Gianluca Demarinis

My favourite solution PHP:

我最喜欢的解决方案 PHP：

<img src="<?php echo "image.jpg" . "?v=" . filemtime("image.jpg"); ?>" />

every change of file "create" a new version of the file

每次更改文件都会“创建”一个新版本的文件

回答by Gianluca Demarinis

in PHP you can use this trick

在 PHP 中你可以使用这个技巧

<img src="image.png?<?php echo time(); ?>" />

The time() function show the current timestamp. Every page load is different. So this code deceive the browser: it read another path and it "think" that the image is changed since the user has visited the site the last time. And it has to re-download it, instead of use the cache one.

time() 函数显示当前时间戳。每个页面加载都不同。所以这段代码欺骗了浏览器：它读取另一个路径并“认为”自从用户上次访问该站点以来图像已更改。它必须重新下载它，而不是使用缓存。

回答by stackFan

Go Random. Just use some random number and append it with image filename.

去随机。只需使用一些随机数并附加图像文件名即可。

<img src="image.jpg?<?=rand(1,1000000)?>">

回答by Manish Meshram

I had come up with this issue some times ago. And I was getting data through JSON in AJAX. So what I did is, I just added a Math.random()Javascript function and It worked like a charm. The backend I used was a flask.

我之前已经提出过这个问题。我在 AJAX 中通过 JSON 获取数据。所以我所做的是，我只是添加了一个Math.random()Javascript 函数，它就像一个魅力。我使用的后端是一个烧瓶。

<img class="card-img-top w-100 d-block" style="padding:30px;height:400px" src="static/img/${data.image}?${Math.random()} ">