Rails 3：当CSS文件中指定图像时如何防止图像缓存？

Question

考虑以下 CSS：

.my_class {
  background-image: url(/images/sprites.png);
}

有时我通过添加新精灵来更改 sprites.png，因此我不希望浏览器缓存它。

我想到的一个想法是将 style="background-image: url(/images/sprites.png?)" 添加到类 my_class 的所有元素中，并删除上面的CSS代码。 但是，由于可维护性问题，我不喜欢这个解决方案（例如，如果文件名发生变化，我必须在很多地方更改它，而不是单个 CSS）。

对于这个问题还有哪些其他解决方案？

Answer 1

解决此问题的一种方法是将版本字符串添加到样式目录。

确保您的 css 使用相对于该目录的 URL。 （在本例中，css链接的图像目录为css.1000/image）

.my_class {
    background-image: url(images/sprites.png);
}

然后，使用mod_rewrite向.htaccess添加重写规则code> 文件放在站点的根文件夹中，这将使任何数字路径 /css.1000/styles.css 指向服务器上的 /css/styles.css：

RewriteEngine On
RewriteRule css[\.][0-9]+/(.*)$ css/$1 [L]

任何当你改变你的站点的资产，您可以更改样式表链接中文件夹的版本号。

Answer 2

我建议使用这两种技术之一：

使用 Javascript 执行缓存更新技术。

 $('.my_class').ready(function() { 
   $(this).css('background-image', 
    $(this).css('background-image') + "?" + Math.random());
 }

对给定页面使用特定的服务器内容控制。这是来自 此 StackExchange 答案（< a href="https://serverfault.com/questions/235242/how-to-set-no-cache-headers-to-a-specific-url-using-htaccess-and-mod-rewrite">类似技术存在于 apache）：

 server {
   ...

   location = /images/sprites.png {
    expires 1d;
   }
   ...
 }

这些都可以帮助缓解您的问题。祝你好运！

Answer 3

使用rails asset pipeline（即rails > 3.1），它会通过指纹识别机制自动为您执行此操作：

http://guides.rubyonrails.org/asset_pipeline.html#what-is-fingerprinting-and-why-should-i-care-questionmark

将 mycss.css 重命名为 mycss.css .erb 并将图像指定为：

.my_class { background-image: url(<%= asset_path 'image.png' %>) }

Rails将处理其他一切（您还需要启用资产预编译）。