Szyny 4 i broszura: nie znaleziono zasobów/zdjęć?

Question

Mam problem, który naprawdę nie powinien być problemem. Z jakiegoś powodu nie mam dostępu do zdjęć, które mam w app/assets/images. Kiedy ich poproszę, otrzymuję 404.

./log/development.log:Started GET "/assets/images/marker-shadow.png" for 127.0.0.1 at 2013-07-20 22:02:38 -0400 
./log/development.log:ActionController::RoutingError (No route matches [GET] "/assets/images/marker-shadow.png"): 

mike@sleepycat:~/projects/myapp$ ls app/assets/images/ 
marker-icon-2x.png marker-icon.png marker-shadow.png 

To naprawdę powinna być łatwa w obsłudze braindead ... co najwyżej restartowanie serwera. Uruchomiłem ponownie serwer, sprawdziłem uprawnienia do plików, aby upewnić się, że pliki mają przyzwoite uprawnienia ... i nadal dostaję 404, kiedy ładuję moją stronę.

Czego mi tu brakuje?

pomocą szyn 4.

Answer 1

prostu obraz z tego pomocnika:

image_path('marker-shadow.png') 

ścieżka jest generowany przez szyny „/assets/marker-shadow.png” bez Foldery 'zdjęć.

Answer 2

wszystko masz w app/assets/images/ folderu można uzyskać dostęp z bezpośredniej ścieżki

'/assets/marker-icon-2x.png' 
... 

jest pomocnikiem atutem tego użyć go wewnątrz erb:

asset_path('marker-icon-2x.png') 

dla obrazów wewnątrz SCSS staje:

image-path('marker-icon-2x.png') 

ponieważ foldery app/assets/[images||stylesheets||javascripts] są podobne do mapy jeden folder /assets z asset pipeline framework

zauważyć, że pomocnik image_tag('marker-icon-2x.png') „wie” już gdzie obraz jest

Answer 3

Dodałem adresy URL jako atrybut danych do elementu #map, tutaj z mojej smukłej formy:

#map data-marker-url=asset_path('leaflet/marker-icon.png') data-marker-2x-url=asset_path('leaflet/marker-icon-2x.png') data-marker-shadow-url=asset_path('leaflet/marker-shadow.png') 

Następnie dostęp do wartości podczas ustawiania znacznika (latitude & longitude również atrybuty transmisji danych, ale który dla uproszczenia pominięte)

$map = $('#map') 
L.marker(
    [latitude, longitude], 
    icon: new L.Icon({ 
    iconUrl: $map.data('marker-url'), 
    retinaUrl: $map.data('marker-2x-url'), 
    shadowUrl: $map.data('marker-shadow-url'), 
    iconSize: [25, 41], 
    iconAnchor: [12, 41], 
    popupAnchor: [1, -34], 
    shadowSize: [41, 41] 
    }) 
).addTo(map) 

Ostatnie 4 atrybuty ustawia niektóre meta dane dla obrazów, w przeciwnym razie centrum obrazów zostanie ustawione na to położenie, a nie na czubku znacznika. Wartości te są wartościami domyślnymi dla ulotki 0.6.4.

Zamiast atrybutów danych możesz również wysłać javascript przez erb lub coś podobnego, ale ja to lubię.

Answer 4

Jeśli chcesz wyświetlić obrazy w widoku, musisz użyć parametru image_path w połączeniu z image_tag. image_path() zwraca tylko ścieżkę do pliku obrazu. Tak, możesz zrobić to:

Answer 5

Miałem ten sam problem za pomocą DropZone.js. Zamiast mieszać w ogromny plik DropZone, właśnie utworzyłem folder w/public o nazwie "images" i umieściłem tam moje sprite'owe obrazy. Tam właśnie spodziewa się ich DropZone i dlatego dostaję błąd "404" Not Found dla obrazów sprite'ów.

Answer 6

Znalazłem, że jeśli właśnie dodałeś folder/app/assets/images, zębatki nie znajdą go, dopóki nie uruchomisz ponownie aplikacji.

Answer 7

Dzieje się tak, ponieważ Ulotka próbuje odgadnąć ścieżkę obrazów. Ale you can set the default marker images path w kodzie inicjatora, tak:

L.Icon.Default.imagePath = 'path-to-your-leaflet-images-folder'; 
// your other Leaflet code 

Więc w twoim przypadku to będzie:

L.Icon.Default.imagePath = '/assets' 

ale jest problem z tym podejściem, to nie działa z trawionym obrazów. Dlatego najlepiej użyć niestandardowego Icon i ustawić adresy URL z szynami pomocników:

digested_icon = L.icon({ 
    iconUrl: "<%= asset_path 'marker-icon.png' %>" 
    iconRetinaUrl: "<%= asset_path 'marker-icon-2x.png' %>" 
    shadowUrl: "<%= asset_path 'marker-shadow.png' %>" 
}) 

Następnie należy podać tę niestandardową ikonę po dodaniu nowego markera:

L.marker([45.5, -10.9], {icon: digested_icon}) 

Pamiętaj, aby dodać .erb rozszerzenie twój plik kawy/js, aby pomocnicy mogli pracować.