Rails 4 и Leaflet: активы/изображения не найдены?

У меня проблема, которая на самом деле не должна быть проблемой. По какой-то причине изображения, которые у меня есть в app/assets/images, недоступны. Когда я запрашиваю их, я просто получаю 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

Это действительно должно быть легкое исправление... максимум перезапуск сервера. Я перезапустил сервер, я проверил права доступа к файлам, чтобы убедиться, что у файлов есть разумные разрешения на них ... и я все еще получаю 404, когда загружаю свою страницу.

Что мне здесь не хватает?

Использование Рельсов 4.


ruby-on-rails leaflet asset-pipeline
person mikewilliamson    schedule 21.07.2013    source источник

Ответы (7)


arrow_upward
18
arrow_downward

Просто получите изображение с помощью этого помощника:

image_path('marker-shadow.png')

Путь, сгенерированный rails, — «/assets/marker-shadow.png» без папки «images».

person Nanego    schedule 21.07.2013
comment
Фу. Вот оно. Когда я создавал маркер на карте, Leaflet.js запрашивал значок по умолчанию, но Leaflet не знает о конвейере ресурсов Rails. Мне пришлось указать пользовательский значок с iconUrl, который использует помощник image_path. Спасибо! - person mikewilliamson; 21.07.2013
comment
Если вы хотите отображать изображения в представлении, вам нужно использовать image_path в сочетании с image_tag. image_path() возвращает только путь к файлу изображения. Итак, вы должны сделать это: image_tag image_path('your_image.png') - person Adrien Lamothe; 16.11.2013
comment
Я все еще испытываю те же проблемы. Если вы интегрируете листовку в проект rails, не должны ли мы вместо этого поместить их в папку vendor? Как правильно предварительно скомпилировать все с файлами в папке vendor и получить правильный доступ ко всем файлам листовок по умолчанию? Он работает в моей среде разработки, но после предварительной компиляции возникает та же проблема. - person richsinn; 29.08.2014

arrow_upward
8
arrow_downward

все, что у вас есть в папке app/assets/images/, к которой вы можете получить доступ по прямому пути

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

для этого есть помощник актива, чтобы использовать его внутри erb:

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

для изображений внутри scss это становится:

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

потому что папки app/assets/[images||stylesheets||javascripts] сопоставляются как одна папка /assets с инфраструктурой конвейера ресурсов

обратите внимание, что помощник image_tag('marker-icon-2x.png') уже "знает", где находится изображение

person okliv    schedule 21.07.2013

arrow_upward
3
arrow_downward

Я добавил URL-адреса в качестве атрибута данных к элементу #map, здесь из моего тонкого шаблона:

#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')

Затем я получаю доступ к значениям при установке маркера (latitude и longitude также являются атрибутами данных, но я пропустил это для краткости)

$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)

Последние 4 атрибута задают некоторые метаданные для изображений, в противном случае центр изображения будет установлен в этом месте, а не в конце маркера. Эти значения являются значениями по умолчанию для брошюры 0.6.4.

Вместо атрибутов данных вы также можете отправить свой javascript через erb или что-то в этом роде, но мне так больше нравится.

person iGEL    schedule 27.10.2013

arrow_upward
3
arrow_downward

Это происходит потому, что Leaflet пытается угадать путь к изображениям. Но вы можете установить путь к изображениям маркеров по умолчанию в коде инициализатора, например это:

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

Итак, в вашем случае это будет:

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

Но есть проблема с этим подходом, он не работает с переваренными изображениями. Так что лучше всего использовать пользовательский Icon и установить URL-адреса с помощью хелперов rails:

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

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

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

Не забудьте добавить расширение .erb в ваш файл coffee/js, чтобы помощники работали.

person Mauricio Pasquier Juan    schedule 28.05.2016

arrow_upward
2
arrow_downward

Если вы хотите отобразить изображения в представлении, вам нужно использовать image_path в сочетании с image_tag. image_path() возвращает только путь к файлу изображения. Итак, вы бы сделали это:

image_tag image_path('your_image.png')
person Adrien Lamothe    schedule 16.11.2013

arrow_upward
2
arrow_downward

У меня была такая же проблема с использованием DropZone.js. Вместо того, чтобы возиться с огромным файлом DropZone, я просто создал папку в /public с именем «images» и поместил туда свои изображения спрайтов. Вот где их ожидает DropZone, и поэтому я получал ошибку «404» Not Found для изображений спрайтов.

person David    schedule 30.10.2014

arrow_upward
1
arrow_downward

Я обнаружил, что если вы только что добавили папку /app/assets/images, sprockets не найдет ее, пока вы не перезапустите приложение.

person joshwa    schedule 22.11.2014