11

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

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

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

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

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

4

3 回答 3

5

这本身似乎有点工作，但看起来正确的方法是：

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

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

于 2013-03-14T20:51:28.013 回答
5

该retina.js文档建议使用 rails helper 方法：

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

还要确保您拥有支持该属性的最新版本的Retina.js 。data-at2x

于 2013-08-09T11:51:53.123 回答
1

对于除图像标签（即 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;
  }
}
于 2014-10-24T15:24:48.857 回答