html - 除非更改名称，否则浏览器不会加载优化图像

Question

所以我正在建立一个网站，我有一些我浏览过的图片 https://tinypng.com/以减小尺寸。

其中一张图片是这一张:

http://postimg.org/image/jxxbx85xv/

它被命名为 map.png。该图像的大小为 508KB，很大。

优化后它下降到 113KB:

http://postimg.org/image/g6xya7csp/

现在最大的问题是，如果我只是用新版本的 113KB 覆盖 map.png (508KB)，我会从 firefox 收到以下消息:

图像损坏或截断:<图像路径>

而且它只显示了不到一半的图像。

我在 Chrome 中得到了类似的东西(没有在 IE 中测试)。

现在让我感到困惑的是，如果我将图像名称更改为 map2.png(并更新 html 以指向新图像)图像将毫无问题地显示。

我的问题是:这是浏览器如何缓存图像的错误吗？除了更改图片名称和 img 标签的 src 之外，我还能做些什么吗？

谢谢

更新

是的，即使在硬更新后(CTRL+F5 多次)我仍然看到这个问题。

在我的本地机器上，我使用的是 apache2。我尝试重新启动 apache，但没有解决任何问题。

更新 2

我已经确认，如果我将图像上传到实时服务器，则不会出现错误。我只在我的本地服务器(ubuntu 上的 apache2)中看到这个问题。我仍然希望我有办法解决这个问题，但只要它能在实时服务器上运行，我想我就可以接受。

感谢大家的帮助。

UPDATE3

所以我认为图像在实时服务器上正确显示而不是在我的本地服务器上显示很奇怪。

所以我在谷歌上搜索了一下，这似乎与 Apache 发送静态内容的方式有关。

所以我将这些添加到我的 .htaccess(稍后我将移动到我的虚拟主机 conf 文件):

EnableSendfile Off
EnableMMAP Off

现在图像可以正确显示。

Apache 文档链接

http://httpd.apache.org/docs/2.2/mod/core.html#enablesendfile

http://httpd.apache.org/docs/2.2/mod/core.html#enablemmap

再次感谢所有的帮助。

Answer 1

防止缓存和总是加载新图像的简单解决方案是在 url 末尾添加一个非固定参数:

http://postimg.org/image/g6xya7csp/?3123423 <-- 数字不固定，每次生成

如果您运行此非固定数量查询，服务器将查找不同的 URL 图像，并将提供更新后的图像。这是一个有助于通过缓存图像并再次读取新图像的小技巧。

无论如何，Apache 可以使用 mod_expires 在每个 .htaccess(每个目录)上配置不同的规则，您将能够为每种类型的对象编辑过期时间:

<ifModule mod_expires.c>
  ExpiresActive On
  ExpiresDefault "access plus 1 second"
 # ExpiresByType text/html "access plus 1 day"
 # ExpiresByType image/gif "access plus 1 day"
 # ExpiresByType image/jpeg "access plus 1 day"
 # ExpiresByType image/png "access plus 8 hours"
 # ExpiresByType text/css "access plus 1 second"
 # ExpiresByType text/javascript "access plus 30 days"
 # ExpiresByType application/x-javascript "access plus 30 days"
</ifModule>

如您所见，我注释了我的 Expires 以使它们不被缓存。 希望你能用这两个技巧解决你的问题。

文档如下:

https://docs.joyent.com/guides/apache-guide/configuring-mime-types-in-htaccess http://httpd.apache.org/docs/2.2/mod/mod_expires.html