html - 清除图片缓存 - 谷歌缓存




禁用某些图像的缓存 (9)

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

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

我怎样才能禁用缓存只为我动态创建的图像?

注意:随着时间的推移,我必须对创建的图像使用相同的名称。

https://code.i-harness.com


解决方案1并不好。 它确实有效,但在图像文件的末尾添加冒险的随机或时间戳查询字符串是不可扩展的,并且会使浏览器重新下载并缓存发送的每个图像的每个版本。

解决方案2是无用的。nocache头添加到图像文件不仅非常难以实现,而且完全不切实际,因为它需要您预先提前预测需要什么时间,第一次加载任何您认为可能会在未来。

输入Etags ...

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

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

如果您有一个硬编码的图片网址,例如: http://example.com/image.jpg : http://example.com/image.jpg您可以使用php为图片添加标题。

首先,你将不得不让Apache将你的JPG作为php进行处理。 看到这里: 是否有可能执行扩展名为file.php.jpg的PHP?

从文件加载图像(imagecreatefromjpeg),然后添加以前答案中的标题。 使用php函数标题添加标题。

然后用imagejpeg函数输出图像。

请注意,让php处理jpg图像是非常不安全的。 另外请注意,我还没有测试过这个解决方案,所以这取决于你的工作。


很简单,发送一个标题位置。

我的网站包含一张图片,上传图片后没有变化,我添加下面的代码:

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

工作对我来说。


我只是在寻找一个解决方案,上面的答案在我的情况下不起作用(我没有足够的声望评论他们)。 事实证明,至少对于我使用的浏览器和我使用的浏览器(OSX上的Chrome),似乎阻止缓存的唯一一件事是:

Cache-Control = 'no-store'

为了完整性,我现在使用全部3个'no-cache,no-store,must-revalidate'

所以在我的情况下(从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

我检查了所有的答案,最好的答案似乎是(不是):

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

首先。

但是,如果添加cache = 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()获取文件修改时间。


我用这个来解决我的类似问题...显示图像计数器(来自外部提供者)。 它并没有正确刷新。 并且在添加一个随机参数后,所有工作正常:)

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

示例代码(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

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

最好是添加一个校验和,例如图像所代表的数据。 这可以在可能时启用缓存。


浏览器缓存策略可以通过HTTP头来控制。 请记住,他们只是一个提示,真的。 由于浏览器在这个(以及其他任何领域)中是非常不一致的,所以您需要多个标题才能在各种浏览器上获得所需的效果。

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

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

所以,例如 -

<img src="image.png" />

会成为

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

要么

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

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

在服务页面时,随机数字的生成可以发生在服务器上(只要确保页面本身没有被缓存...),或者在客户端(使用JavaScript)。

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





caching