如何更新嵌入在 css 或 js 文件中的图像答案

【问题标题】：how to update images embedded in css or js files如何更新嵌入在 css 或 js 文件中的图像
【发布时间】：2012-04-02 18:12:47
【问题描述】：

我使用的 CSS 文件会加载一些像这样的图像：

eg: main.css:  
.nav{  
background-image:url("/www/images/bg.png")  
}

<link href="/www/css/main.css?version=1.2" type="stylesheet" />

CSS 文件如上所示加载到 HTML 中。

我知道有一种方法可以添加诸如“?version=1.2”之类的查询字符串，以强制浏览器从 Web 服务器而不是从缓存中加载 css 文件。但我的问题是这对 css 文件有效，但对嵌入的图像没有任何作用。

那么，当我编辑图片时，如何让浏览器下载嵌入在 css 或 js 文件中的图片，但名称保持不变？

我不想： 1.更改图片名称 2.禁用缓存

谢谢

【问题讨论】：

标签： css image caching

【解决方案1】：

可以使用chrome incognito让浏览器每次都获取图像吗？

【讨论】：

【解决方案2】：

您可以在主机上使用.htaccess 文件（使用mod_expires）吗？

<IfModule mod_expires.c>
   ExpiresActive On
   ExpiresByType image/png "access plus 1 minutes"
</IfModule>

编辑：我看到了你的编辑。您的问题是您想在服务器上更新图像时强制客户端刷新图像，而不禁用浏览器缓存？

<IfModule mod_expires.c>
   ExpiresActive On
   ExpiresByType image/png "modification plus 1 seconds"
</IfModule>

【讨论】：

谢谢。 mod_expires 是 apache 模块，但是，我们只使用 tomcat 作为 web 服务器。我应该用tomcat做什么？

【解决方案3】：

像?version=2这样向url添加查询字符串只会在url每次更改时防止缓存，例如image.png?random=123，其中random的值在每次页面加载时都不同。唯一的 url 会强制浏览器每次重新获取图像，因为 url 与缓存图像的 url 不匹配。

由于您想使用静态 URL，我建议您将 HTTP 服务器设置设置为向浏览器发送标头而不是缓存图像。如果您需要帮助，请告诉我。

【讨论】：

感谢您的建议。但是浏览器应该加载缓存图像，除非图像已被更改，这只是为了减少流量并加快加载过程。所以缓存图像是必要的。您还有其他想法吗谢谢？
如果嵌入图像的 url 发生了变化（比如从 ?v=1 到 ?v=2，这将触发浏览器重新获取。确保浏览器从在图像更改之前缓存是更改 URL 或让服务器（通过 htaccess 文件）根据图像的修改日期发送缓存指令（我认为其他人在他们的答案中涵盖了这一点）。

【解决方案4】：

Google 的 apache 的 mod_pagespeed 插件将为您进行自动版本控制。它真的很光滑。 http://code.google.com/speed/page-speed/docs/module.html

它在离开网络服务器的过程中解析 HTML（适用于 PHP、rails、python、静态 HTML ——任何东西）并重写指向 CSS、JS、图像文件的链接，以便它们包含一个 id 代码。它在修改后的 URL 上提供文件，并对它们进行非常长的缓存控制。当文件更改时，它会自动更改 URL，因此浏览器必须重新获取它们。它基本上可以正常工作，无需对您的代码进行任何更改。它甚至会在输出时缩小您的代码。

从How to force browser to reload cached CSS/JS files?这个帖子中被盗

【讨论】：