Html 禁用某些图像的缓存

Disable cache for some images

提问by dole doug

I generate some images using a PHP lib.

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

Sometimes the browser does not load the new generated file.

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

How can I disable cache just for images created dynamically by me?

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

Note: I have to use same name for the created images over time.

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

回答by Hexagon

A common and simple solution to this problem that feels like a hack but is fairly portable is to add a randomly generated query string to each request for the dynamic image.

这个问题的一个常见且简单的解决方案感觉像是一个黑客但相当可移植，是向每个动态图像请求添加一个随机生成的查询字符串。

So, for example -

所以，例如 -

<img src="image.png" />

Would become

会成为

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

Or

或者

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

From the point of view of the web-server the same file is accessed, but from the point of view of the browser no caching can be performed.

从 Web 服务器的角度来看，可以访问相同的文件，但从浏览器的角度来看，不能执行缓存。

The random number generation can happen either on the server when serving the page (just make sure the page itself isn't cached...), or on the client (using JavaScript).

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

You will need to verify whether your web-server can cope with this trick.

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

回答by lhunath

Browser caching strategies can be controlled by HTTP headers. Remember that they are just a hint, really. Since browsers are terribly inconsistent in this (and any other) field, you'll need several headers to get the desired effect on a range of browsers.

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

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

回答by Anton Swanevelder

If you need to do it dynamically in the browser using javascript, here is an example...

如果您需要使用 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>

回答by cronoklee

Solution 1 is not great.It does work, but adding hacky random or timestamped query strings to the end of your image files will make the browser re-download and cache every version of every image, every time a page is loaded, regardless of weather the image has changed or not on the server.

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

Solution 2 is useless.Adding nocacheheaders to an image file is not only very difficult to implement, but it's completely impractical because it requires you to predict when it will be needed in advance, the first time you load any image which you think mightchange at some point in the future.

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

Enter Etags...

输入 Etags...

The absolute best wayI've found to solve this is to use ETAGSinside a .htaccessfile in your images directory. The following tells Apache to send a unique hash to the browser in the image file headers. This hash only ever changes when time the image file is modified and this change triggers the browser to reload the image the next time it is requested.

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

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

回答by Tarik

I checked all the answers and the best one seemed to be (which isn't):

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

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

at first.

首先。

However, if you add cache=noneparameter (which is static "none" word), it doesn't effect anything, browser still loads from cache.

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

Solution to this problem was:

这个问题的解决方法是：

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

where you basically add unix timestamp to make the parameter dynamic and no cache, it worked.

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

However, my problem was a little different: I was loading on the fly generated php chart image, and controlling the page with $_GET parameters. I wanted the image to be read from cache when the URL GET parameter stays the same, and do not cache when the GET parameters change.

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

To solve this problem, I needed to hash $_GET but since it is array here is the solution:

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

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

Edit:

编辑：

Although the above solution works just fine, sometimes you want to serve the cached version UNTIL the file is changed. (with the above solution, it disables the cache for that image completely) So, to serve cached image from browser UNTIL there is a change in the image file use:

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

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

filemtime() gets file modification time.

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

回答by Mark

I was just looking for a solution to this, and the answers above didn't work in my case (and I have insufficient reputation to comment on them). It turns out that, at least for my use-case and the browser I was using (Chrome on OSX), the only thing that seemed to prevent caching was:

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

Cache-Control = 'no-store'

For completeness i'm now using all 3 of 'no-cache, no-store, must-revalidate'

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

So in my case (serving dynamically generated images out of Flask in Python), I had to do the following to hopefully work in as many browsers as possible...

因此，在我的情况下（在 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

回答by Dimitri Visser

I know this topic is old, but it ranks very well in Google. I found out that putting this in your header works well;

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

<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">

回答by Stefan van Gastel

Changing the image source is the solution. You can indeed do this by adding a timestamp or random number to the image.

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

Better would be to add a checksum of eg the data the image represents. This enables caching when possible.

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

回答by Jordan Georgiadis

i had this problem and overcoming like this.

我有这个问题，并像这样克服。

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

回答by Daniel

Let's add another solution one to the bunch.

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

Adding a unique string at the end is a perfect solution.

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

example.jpg?646413154

Following solution extends this method and provides both the caching capability and fetch a new version when the image is updated.

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

When the image is updated, the filemtimewill be changed.

当图像更新时，filemtime将被更改。

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

Now output the image:

现在输出图像：

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