Rails 资产管道 Retina @2x 和缓存破坏者时间戳不一致答案

【问题标题】：Rails asset pipeline retina @2x and cache buster timestamps are at oddsRails 资产管道 Retina @2x 和缓存破坏者时间戳不一致
【发布时间】：2013-03-14 12:29:23
【问题描述】：

retina.js 查找具有相同文件名但文件扩展名前带有@2x 的图像

rails 资产管道在文件名末尾添加一个缓存破坏时间戳

这意味着retina.js 正在寻找filename-cachebuster@2x.png，但文件位于filename@2x-cachebuster.png

有人可以解决这个问题吗？

谁错了，如果原始文件名与表明它具有缓存破坏哈希的模式匹配，是否应该训练retina.js 在filename@2x-cachebuster.png 查找文件，或者应该更改rails 管道以确保@ 2x 总是在文件扩展名之前？

【问题讨论】：

标签： ruby-on-rails asset-pipeline retina-display retina.js

【解决方案1】：

这本身似乎需要解决一些问题，但看起来正确的方法是：

<%= image_tag('image', retina: true) %>

这将添加retina.js将拾取的正确data-at2x属性

【讨论】：

它没有为我添加该属性 - 仅添加 retina="true"。
这似乎不是 Rails 的内置功能，我假设 @msaspence 使用的是 retina_rails。如果您使用retina.js，以下@justin-tanner 的回答有效。

【解决方案2】：

retina.js 文档建议使用 rails 辅助方法：

def image_tag_with_at2x(name_at_1x, options={})
  name_at_2x = name_at_1x.gsub(%r{\.\w+$}, '@2x\0')
  image_tag(name_at_1x, options.merge("data-at2x" => asset_path(name_at_2x)))
end

更多信息请查看retina.js documentation。

同时确保您拥有最新版本的 retina.js，支持 data-at2x 属性。

【讨论】：

这仅适用于其路径在代码或视图中定义的图像。请参阅我的答案，了解使用简单 LESS 混合从 CSS 领域解决问题的方法。

【解决方案3】：

对于除图像标签之外的任何东西（即 CSS 背景图像，在我从事过的大多数应用程序中，它比 img 标签使用得更广泛），我已经通过编写一个可以工作的 LESS 助手解决了这个问题像一个魅力。

.at2x(@path, @w: auto, @h: auto) {
  background-image: image-url(@path);
  @at2x_path: ~`"@{path}".replace(/(.*)\.([^.]+)$/, "$1@2x.$2")`;

  @media all and (-webkit-min-device-pixel-ratio : 1.5) {
    background-image: image-url(@at2x_path);
    background-size: @w @h;
  }
}

【讨论】：