Rails-конвейерная сетка Retina @2x и временные метки кэша

retina.js ищет изображение с тем же именем файла, но с @2x перед расширением файла

Конвейер ресурсов rails добавляет временную метку кэша к концу имени файла

Это означает, что retina.js ищет [email protected], но файл находится в [email protected]

У кого есть работа для этого?

Кто ошибается в этом, т.е. должен ли retina.js быть обученным искать файлы в [email protected], если исходное имя файла соответствует шаблону, указывающему на то, что он имеет хэш хэша, или должен быть изменен конвейер рельсов, чтобы обеспечить @2x всегда перед расширением файла?

Ответы

Ответ 1

Это похоже на немного работу вокруг себя, но похоже, что правильный способ сделать это:

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

и это добавит правильный атрибут data-at2x, который retina.js получит

Ответ 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.

Также убедитесь, что у вас установлена ​​последняя версия retina.js, поддерживающая атрибут data-at2x.

Ответ 3

Для чего-либо, кроме тега изображения (например, фоновых изображений CSS, которые гораздо чаще используются, чем теги img в большинстве приложений, над которыми я работал), я решил это, написав небольшой помощник LESS, который работает Как колдовство.

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

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