Rails asset pipeline retina @2x and cache buster t

问题:

retina.js looks for an image with the same filename but with @2x before the file extension

The rails asset pipeline adds a cache busting timestamp to the end of the filename

This means retina.js is looking for [e-mail] but the file is at [e-mail]

Anyone have a work around for this?

Who's wrong on this ie, should retina.js be trained to look for files at [e-mail] if the original filename matches a pattern that indicates it has a cache busting hash, or should the rails pipeline be changed to ensure the @2x is always just before the file extension?

回答1:

This seems like a bit of work around in and of itself but looks like the correct way to do this is:

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

and this will add the correct data-at2x attribute that retina.js will pick up

回答2:

The retina.js documentation suggests using a rails helper method:

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

For more information check the retina.js documentation.

Also make sure you have the latest version of retina.js, supporting the data-at2x attribute.

回答3:

For anything other than an image tag (i.e. CSS background images, which are much more widely used than img tags in most apps I've worked on), I've solved it by writing a little LESS helper which works like a charm.

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