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

问题描述 投票：0回答：14

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

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

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

html browser browser-cache image-caching
14个回答
165
投票

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

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

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

25
投票

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

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

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

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

我最喜欢的 PHP 解决方案：

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

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

5
投票

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

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

您可以将 

http-equiv
放在 
<meta>
标记中，这将告诉浏览器不要使用缓存（甚至更好 - 以某种定义的方式使用它），但最好配置服务器发送正确的 http 
cache
标头。查看有关缓存的文章。

尽管如此，某些浏览器可能不支持所有 

http
标准，但我相信这是正确的方法。

4
投票

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

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

另一个强大的解决方案：

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

这会在路径上打印“最后修改时间戳”。

新版本-->下载新图片

相同版本 --> 获取缓存版本

2
投票

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

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

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

您可以查阅RFC以了解更多详细信息。

2
投票

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

2
投票

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

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

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

2
投票

听起来更多的是主要用户看到他们的新图像而不是缓存被完全禁用？如果是这种情况，您可以执行以下操作：

var headers = new Headers()
headers.append('pragma', 'no-cache')
headers.append('cache-control', 'no-cache')

var init = {
  method: 'GET',
  headers: headers,
  mode: 'no-cors',
  cache: 'no-cache',
}

fetch(new Request('path/to.file'), init)

如果您在上传新图像后执行此操作，浏览器应该会看到这些标头并调用后端，跳过缓存。新图像现在位于该 URL 下的缓存中。主要用户将看到新图像，但您仍然保留缓存的所有好处。一旦缓存失效，查看此图像的其他人将在一天左右看到更新。

如果更关心的是确保所有用户看到最新版本，您可能需要使用其他解决方案之一。

1
投票

在 PHP 中，您可以发送随机数或当前时间戳：

<img src="image.jpg?<?=Date('U')?>">

或

<img src="image.jpg?<?=rand(1,32000)?>">
1
投票

这不是好的结果，我认为这是正确编程的方法。

 <td><?php echo "<img heigth=90 width=260 border=1 vspace=2 hspace=2 src=".$row['address']."?=".rand(1,999)."/>" ?></td>
1
投票

我以前曾多次提出过这个问题。我通过 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()} ">

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.