禁用某些图像的缓存

Question

我使用 PHP 库生成一些图像。

有时浏览器不会加载新生成的文件。

如何仅对我动态创建的图像禁用缓存？

注意：随着时间的推移，我必须为创建的图像使用相同的名称。

Answer 1

解决方案 1 不是很好。它确实有效，但是在图像文件的末尾添加 hacky 随机或时间戳查询字符串会使浏览器重新下载并缓存每个图像的每个版本，每次加载页面时，无论天气如何，服务器上的图像都发生了变化。

解决方案 2 没用。 将nocache 标头添加到图像文件不仅很难实现，而且完全不切实际，因为它需要您预测何时需要它提前，第一次加载您认为在未来某个时间点会发生变化的任何图像。

输入标签...

我发现解决此问题的绝对最佳方法是在图像目录中的 .htaccess 文件中使用 ETAGS。下面告诉 Apache 在图像文件头中向浏览器发送一个唯一的散列。此哈希仅在修改图像文件时才会更改，并且此更改会触发浏览器在下次请求时重新加载图像。

<FilesMatch "\.(jpg|jpeg)$">
FileETag MTime Size
</FilesMatch>

Answer 2

浏览器缓存策略可以由 HTTP 标头控制。请记住，它们只是一个提示，真的。由于浏览器在此（以及任何其他）字段中非常不一致，因此您需要多个标题才能在一系列浏览器上获得所需的效果。

header ("Pragma-directive: no-cache");
header ("Cache-directive: no-cache");
header ("Cache-control: no-cache");
header ("Pragma: no-cache");
header ("Expires: 0");

Answer 3

我遇到了这个问题并像这样克服。

var newtags='<div class="addedimage"><h5>preview image</h5><img src="'+one+'?nocache='+Math.floor(Math.random() * 1000)+'"></div>';

Answer 4

我检查了所有答案，最好的答案似乎是（不是）：

<img src="image.png?cache=none">

一开始。

但是，如果添加 cache=none 参数（即静态“none”字样），则不会产生任何影响，浏览器仍会从缓存中加载。

这个问题的解决方法是：

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

您基本上添加 unix 时间戳以使参数动态且没有缓存，它起作用了。

但是，我的问题有点不同： 我正在加载动态生成的 php 图表图像，并使用 $_GET 参数控制页面。我希望在 URL GET 参数保持不变时从缓存中读取图像，并且在 GET 参数更改时不缓存。

为了解决这个问题，我需要散列 $_GET 但由于它是数组，这里是解决方案：

$chart_hash = md5(implode('-', $_GET));
echo "<img src='/images/mychart.png?hash=$chart_hash'>";

编辑：

虽然上述解决方案工作得很好，但有时您希望在文件更改之前提供缓存版本。 （使用上述解决方案，它会完全禁用该图像的缓存） 因此，要从浏览器提供缓存的图像，直到图像文件使用发生变化：

echo "<img src='/images/mychart.png?hash=" . filemtime('mychart.png') . "'>";

filemtime() 获取文件修改时间。

Answer 5

我只是在寻找解决方案，而上面的答案在我的情况下不起作用（而且我没有足够的声誉来评论它们）。事实证明，至少对于我的用例和我使用的浏览器（OSX 上的 Chrome），唯一似乎阻止缓存的是：

Cache-Control = 'no-store'

为了完整起见，我现在使用所有 3 个“无缓存、无存储、必须重新验证”

因此，就我而言（在 Python 中使用 Flask 动态生成图像），我必须执行以下操作以希望在尽可能多的浏览器中工作...

def make_uncached_response(inFile):
    response = make_response(inFile)
    response.headers['Pragma-Directive'] = 'no-cache'
    response.headers['Cache-Directive'] = 'no-cache'
    response.headers['Cache-Control'] = 'no-cache, no-store, must-revalidate'
    response.headers['Pragma'] = 'no-cache'
    response.headers['Expires'] = '0'
    return response

Answer 6

让我们添加另一个解决方案。

在末尾添加一个唯一的字符串是一个完美的解决方案。

example.jpg?646413154

以下解决方案扩展了此方法，并提供缓存功能并在图像更新时获取新版本。

当图片更新时，filemtime 会发生变化。

<?php
$filename = "path/to/images/example.jpg";
$filemtime = filemtime($filename);
?>

现在输出图像：

<img src="images/example.jpg?<?php echo $filemtime; ?>" >

Answer 7

简单，发送一个标头位置。

我的网站，包含一张图片，上传图片后没有变化，所以我添加了这段代码：

<?php header("Location: pagelocalimage.php"); ?>

为我工作。

Answer 8

更改图像源是解决方案。您确实可以通过向图像添加时间戳或随机数来做到这一点。

最好添加一个校验和，例如图像所代表的数据。这会在可能的情况下启用缓存。

Answer 9

如果您有硬编码的图片 URL，例如：http://example.com/image.jpg，您可以使用 php 为您的图片添加标题。

首先，您必须让 apache 将您的 jpg 处理为 php。 看这里： Is it possible to execute PHP with extension file.php.jpg?

从文件中加载图像（imagecreatefromjpeg），然后添加之前答案的标题。使用 php 函数 header 添加标题。

然后用imagejpeg函数输出图片。

请注意，让 php 处理 jpg 图像是非常不安全的。另请注意，我尚未测试此解决方案，因此您可以自行决定是否使用它。

Answer 10

我知道这个话题很老，但它在 Google 中的排名很好。我发现把它放在你的标题中效果很好；

<meta Http-Equiv="Cache-Control" Content="no-cache">
<meta Http-Equiv="Pragma" Content="no-cache">
<meta Http-Equiv="Expires" Content="0">
<meta Http-Equiv="Pragma-directive: no-cache">
<meta Http-Equiv="Cache-directive: no-cache">

Answer 11

我用它来解决我的类似问题...显示图像计数器（来自外部提供商）。它并不总是正确刷新。添加随机参数后，一切正常:)

我附加了一个日期字符串以确保至少每分钟刷新一次。

示例代码（PHP）：

$output .= "<img src=\"http://xy.somecounter.com/?id=1234567890&".date(ymdHi)."\" alt=\"somecounter.com\" style=\"border:none;\">";

这会产生一个src 链接，例如：

http://xy.somecounter.com/?id=1234567890&1207241014

Answer 12

如果您需要在浏览器中使用 javascript 动态执行此操作，这里有一个示例...

<img id=graph alt="" 
  src="http://www.kitco.com/images/live/gold.gif" 
  />

<script language="javascript" type="text/javascript">
    var d = new Date(); 
    document.getElementById("graph").src = 
      "http://www.kitco.com/images/live/gold.gif?ver=" + 
       d.getTime();
</script>

Answer 13

这个问题的一个常见且简单的解决方案是在每个动态图像请求中添加一个随机生成的查询字符串。

所以，例如-

<img src="image.png" />

会变成

<img src="image.png?dummy=8484744" />

或者

<img src="image.png?dummy=371662" />

从网络服务器的角度来看，访问的是相同的文件，但从浏览器的角度来看，无法执行缓存。

随机数生成可以在服务页面时发生在服务器上（只要确保页面本身没有被缓存...），也可以在客户端（使用 JavaScript）上发生。

您将需要验证您的网络服务器是否可以应付这个技巧。