如何防止浏览器缓存图片？

Question

我在网站上有一张图片，不想被缓存。这张图片作为CSS背景使用，所以无法动态更改其名称。有什么好的方法吗？

- Alex

---

我可以设置Apache。有没有更简单的方法？ - Alex

@Alex你可以创建一个.htaccess文件，其中包含有关该文件的缓存指令，这很容易，并且不需要触及Apache。 - Pekka

文件路径为 wp-content/themes/ss3/includes/sprite.jpg。你能帮我解决一下规则的问题吗？ - Alex

@Alex 抱歉，我需要自己查找和测试规则，现在无法做到。无论如何，您需要使用此链接来将指令限制为一个文件；其余内容可以在SO上找到，尝试搜索“apache禁用缓存”之类的内容。@David提供的链接教程中也应该包含相关信息。 - Pekka

@Alex - 只是好奇，你为什么不想让文件缓存？ - Shauna

这是一个动态生成的精灵。 - Alex

Answer 1

另一个选择是在您的图像文件后添加一个随机字符串。

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

这样可以确保每次显示页面时重新加载图像。

- Garry

---

在许多浏览器中都可以正常工作，但在IE8中，我在img src的末尾添加了一个随机数作为查询字符串，但IE8仍然会显示缓存的图像！尝试使用哈希值，例如image.jpg#random，但也没有用。 - East of Nowhere

Answer 2

使用Apache，您可以通过两种不同的方式实现此目标：

方法一：使用mod_headers模块：

<FilesMatch "\.(png|jpg|jpeg|jpeg)$">
Header set Expires "Fri, 04 Aug 1978 12:00:00 GMT"
Header set Cache-Control "no-cache, no-store, must-revalidate, max-age=0, proxy-revalidate, no-transform"
Header set Pragma "no-cache"
</FilesMatch>

或者使用mod_expires：

<IfModule mod_expires.c>
  ExpiresActive On
  ExpiresByType image/png A0
  ExpiresByType image/gif A0
  ExpiresByType image/jpg A0
  ExpiresByType image/jpeg A0
</IfModule>

- Flask

---

据我所知，您可以跳过2行并左对齐：Header set Cache-Control "no-cache, no-store, max-age=0"。 - ceth

Answer 3

mnot有一个很好的缓存教程，可以解释如何设置HTTP头来请求不缓存图像（请记住，您需要为图像设置HTTP头，而不是HTML文档）。

然而，这可能不是一个好主意，因为图像往往相对较大，所以为每个页面重新下载它可能会导致显着的性能下降。

- Quentin

Answer 4

如果您无法在Apache上设置缓存规则（如@David Dorvard的答案中建议的-请参阅使用<Files指令的部分），您可以通过PHP脚本传递图像，并在那里设置自己的（不）缓存标头：

<?php 
header('Cache-Control: no-cache');
header('Expires: 0');
header('Content-Type: image/jpeg'); // or whatever your image is
readfile('/some/path/to/yourfile.jpg');
?>

这个方法应该能够得到一个完全没有缓存的图片；重点是应该，因为不同的浏览器有不同的问题（如果我没记错的话，IE6在作为背景图片链接时仍然会缓存它，但幸运的是这种情况正在逐渐消失）。

请注意，这种简单的方法会导致1）服务器负载增加，因为它需要为图片请求启动PHP，2）禁用脚本/图片的部分下载。

- Piskvor left the building

---

我可以设置Apache。有没有更简单的方法？ - Alex

@Alex Dumitru：在这种情况下，请阅读@David Dorward答案中的链接；我认为对你有用的部分从这里开始：http://www.mnot.net/cache_docs/#IMP-SERVER - Piskvor left the building

Answer 5

如果你的目标是现代浏览器，你可以使用HTML5清单文件：http://diveintohtml5.ep.io/offline.html#network

- edeverett

---

链接已失效，请更新。 - Pedro Lobito