Question

我遇到一个问题，即用户报告他们的图片没有上传，旧图片仍在那里。仔细观察后，新图像就在那里，它们与旧图像的名称相同。我在上传时做的是我为了SEO目的重命名图像。当他们删除图像时，旧索引变为可用并被重用。因此它具有相同的图像名称。

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

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

Answer 1

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

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

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

Answer 2

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

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

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

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

Answer 3

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

尽管如此，有些浏览器可能不支持所有http标准，但我相信这是可行的方法。

Answer 4

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

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

Answer 5

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

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

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

您可以参考RFC了解更多详情。

Answer 6

我最喜欢的解决方案PHP：

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

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

Answer 7

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

Answer 8

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

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

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

Answer 9

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

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

Answer 10

我之前曾想过这个问题。而且我正在通过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()} ">

Answer 11

另一个强大的解决方案：

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

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

新版本->下载新图片

相同版本->取缓存的那个

Answer 12

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

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

或

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

Answer 13

听起来，主要是主要用户看到新映像而不是完全禁用缓存？如果是这样，您可以执行以下操作：

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下的高速缓存中。主要用户将看到新映像，但是您仍然保留了缓存的所有好处。一旦其他人查看此图片，他们的缓存就会在一天左右的时间内看到更新。

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

Answer 14

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

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

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

14 个答案: