Szyny rurociągu aktywów siatkówki @ 2x cache i datowniki buster są sprzeczne

Question

retina.js wygląda na obrazie z taką samą nazwą, ale z @ 2x przed rozszerzeniem

szyn atutem rurociąg dodaje cache krach znacznik czasu do koniec pliku

oznacza to retina.js szuka filename-cachebuster@2x.png ale plik jest w filename@2x-cachebuster.png

ktoś ma pracę wokół tego?

Kto się pomylił w tym przypadku, czy plik retina.js powinien być wyszkolony w wyszukiwaniu plików pod numerem filename@2x-cachebuster.png, jeśli oryginalna nazwa pliku pasuje do wzorca, który wskazuje, że ma skrót do pomijania pamięci podręcznej, lub czy potok powinien zostać zmieniony, aby zapewnić @ 2x jest zawsze tuż przed rozszerzeniem pliku?

Answer 1

Wydaje się to trochę pracy wokół sama w sobie, ale wygląda na poprawny sposób to zrobić jest:

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

a to doda prawidłowy atrybut danych-at2x że retina.js odbierze up

Answer 2

dokumentacja retina.js sugeruje stosując metodę szyny pomocnika:

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 

Aby uzyskać więcej informacji sprawdź retina.js documentation.

Upewnij się także, że masz najnowszą wersję retina.js, obsługującą atrybut data-at2x.

Answer 3

Dla czegokolwiek innego niż znacznik obrazu (tj. Obrazy tła CSS, które są znacznie szerzej używane niż znaczniki img w większości aplikacji, nad którymi pracowałem), rozwiązałem je, pisząc trochę pomocnika LESS, który działa jak urok.

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