Rails资产管道高清视网膜@2x和缓存破坏者时间戳存在冲突

Question

retina.js会寻找与文件扩展名之前相同文件名但带有@2x的图像

Rails资产管道将缓存破坏时间戳添加到文件名的末尾

这意味着retina.js正在寻找[e-mail]，但文件在[e-mail]处。

是否有一种解决方法？

在这种情况下，谁是错误的？即，如果原始文件名匹配指示它具有缓存破坏哈希的模式，则retina.js是否应该被训练以查找[e-mail]文件？或者rails管道是否应更改以确保@2x始终位于文件扩展名之前？

- msaspence

Answer 1

< p > 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文档。

同时，请确保您使用的是支持data-at2x属性的最新版本的retina.js。

- Justin Tanner

---

这仅适用于在代码或视图中定义路径的图像。请参阅我的答案，了解如何使用简单的LESS mixin从CSS-land解决此问题。 - Chris Cashwell

Answer 2

这似乎是一个有点费力的方法，但正确的做法看起来是：

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

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

- msaspence

---

它没有为我添加那个属性 - 只添加了 retina="true"。 - sergserg

这似乎不是Rails内置功能，我猜@msaspence正在使用retina_rails。如果您正在使用retina.js，则下面@justin-tanner的答案有效。 - Frederik

Answer 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;
  }
}

- Chris Cashwell