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

【问题标题】：Rails 3: How to prevent image caching when the image is specified in the CSS file?Rails 3：在CSS文件中指定图像时如何防止图像缓存？
【发布时间】：2011-08-15 00:07:25
【问题描述】：

考虑以下 CSS：

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

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

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

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

【问题讨论】：

为什么不在有变化的时候让缓存过期呢？客户端应该在显示本地缓存之前查询服务器并查看内容是否被修改。
@Devin：我怎样才能使缓存过期？
Rails 应自动为资产附加时间戳，请参阅“自定义资产路径”标题下的 api.rubyonrails.org/classes/ActionView/Helpers/…
@Devin M 虽然 Rails 确实为 css 和图像链接提供了时间戳，但据我所知，这不适用于 css background-image 链接。

标签： ruby-on-rails css ruby-on-rails-3 browser-cache image-caching

【解决方案1】：

解决此问题的一种方法是add a version string to your style directory。

<link rel="stylesheet" href="/css.1000/styles.css" type="text/css" />

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

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

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

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

每当您更改站点的资产时，都会更改样式表链接中文件夹的版本号。

【讨论】：

【解决方案2】：

我会建议以下两种技术之一：

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

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

为您的给定页面使用特定的服务器内容控制。这是来自 this StackExchange answer 的 nginx (similar techniques exist in apache)：

 server {
   ...

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

这些都有助于缓解您的问题。祝你好运！

【讨论】：

【解决方案3】：

使用 rails 资产管道（即 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 会处理其他所有事情（您还需要启用资产预编译）。

【讨论】：