Rails资产流水线retina @2x和缓存终结器时间戳不一致

Question

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

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

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

有人有解决这个问题的办法吗？

在这一点上谁错了，如果原始文件名与指示其具有缓存破坏散列的模式匹配，是否应该训练retina.js在filename@2x-cachebuster.png中查找文件，或者是否应该更改rails管道，以确保@2x始终位于文件扩展名之前？

Answer 1

这看起来本身需要做一些工作，但看起来正确的方法是：

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

这将添加正确的数据- retina.js将获取的at2x属性

Answer 2

除了图片标签(即CSS背景图片，在我工作过的大多数应用程序中比img标签使用得更广泛)以外的任何东西，我已经解决了这个问题，我编写了一个更少的帮助器，它的工作方式就像一个护身符。

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