11

retina.jsは、同じファイル名で、ファイル拡張子の前に@2xが付いた画像を探します

Railsアセットパイプラインは、ファイル名の最後にキャッシュバスティングタイムスタンプを追加します

これは、retina.jsが探しているfilename-cachebuster@2x.pngが、ファイルがfilename@2x-cachebuster.png

誰かがこれを回避する方法がありますか？

これの誰が間違っているのか、つまり、元のファイル名がキャッシュバスティングハッシュを持っていることを示すパターンと一致するかどうかでファイルを探すようにretina.jsをトレーニングする必要がありますfilename@2x-cachebuster.png。または、@2xが常に直前になるようにrailsパイプラインを変更する必要があります。ファイル拡張子？

4

3 に答える 3

5

これは、それ自体で少し回避策のように見えますが、これを行う正しい方法は次のように見えます。

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

これにより、retina.jsが取得する正しいdata-at2x属性が追加されます

于 2013-03-14T20:51:28.013 に答える
5

retina.jsドキュメントは、railshelperメソッドの使用を提案しています。

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.jsdata-at2xがあることを確認してください。

于 2013-08-09T11:51:53.123 に答える
1

img画像タグ（つまり、私が取り組んだほとんどのアプリのタグよりもはるかに広く使用されているCSS背景画像）以外の場合は、チャームのように機能する小さな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 に答える