2013-07-21 3 views
9

У меня возникла проблема, которая действительно не должна быть проблемой. По какой-то причине изображения, которые у меня есть в приложении/активах/изображениях, недоступны. Когда я прошу их, я просто получаю 404.Рельсы 4 и листы: активы/изображения не найдены?

./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"): 

[email protected]:~/projects/myapp$ ls app/assets/images/ 
marker-icon-2x.png marker-icon.png marker-shadow.png 

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

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

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

ответ

17

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

image_path('marker-shadow.png') 

Путь, порожденный рельсами "/assets/marker-shadow.png" без папки 'Изображения'.

+2

Ugh. Вот и все. Leaflet.js запрашивал значок по умолчанию, когда я создал маркер на карте, но Leaflet не знает о материалах конвейера Rails. Я должен был указать пользовательский значок с iconUrl, который использует помощник image_path. Благодаря! – mikewilliamson

+1

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

+0

Я все еще испытываю те же проблемы. Если вы интегрируете листовки в проект рельсов, не стоит ли их размещать в папке «vendor»? Каков правильный способ прекомпилировать все с файлами в папке «vendor» и иметь правильный доступ к пути во всех файлах листка по умолчанию? Он работает в моей среде разработки, но производство претерпевает такую ​​же проблему после прекомпиляции. – richsinn

7

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

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

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

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

для изображений внутри СКСА становится:

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

поскольку папки app/assets/[images||stylesheets||javascripts] - это карта, похожая на одна папка /assets с asset pipeline framework

отметить, что помощник image_tag('marker-icon-2x.png') «знает», где уже изображение

2

Я добавил URLs в качестве атрибута данных в #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 или что-то в этом роде, но мне это нравится лучше.

2

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

image_tag image_path('your_image.png') 
2

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

1

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

2

Это происходит потому, что Leaflet пытается угадать путь изображения. Но you can set the default marker images path в коде инициализации, например:

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

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

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

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

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 для помощников для работы.

Смежные вопросы