Rails 4 and Leaflet: assets/images not found?

问题

I am having a problem that really should not be a problem. For some reason the images I have in app/assets/images are not accessable. When I request them I just get a 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

This really should be a braindead easy fix... restarting the server at most. I have restarted the server, I have checked the file permissions to make sure the files have sane permissions on them... and I still get 404's when I load my page.

What am I missing here?

Using Rails 4.

回答1:

Just get your image with this helper :

image_path('marker-shadow.png')

The path generated by rails is "/assets/marker-shadow.png" without the 'images' folder.

回答2:

all you have in app/assets/images/ folder you can access with direct path

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

there is asset helper for this to use it inside erb:

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

for images inside scss it becomes:

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

because folders app/assets/[images||stylesheets||javascripts] are map like one folder /assets with asset pipeline framework

note that helper image_tag('marker-icon-2x.png') "knows" already where the image is

回答3:

I've added the urls as a data attribute to the #map element, here from my slim template:

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

Then I access the values when setting the marker (latitude & longitude are also data attributes, but I skipped that for brevity)

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

The last 4 attributes set some meta data for the images, otherwise the image center will be set to that location and not the tip of the marker. These values are the defaults for leaflet 0.6.4.

Instead of data attributes you also can send your javascript through erb or something, but I like this better.

回答4:

This happens because Leaflet tries to guess the images path. But you can set the default marker images path in your initializer code, like this:

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

So in your case it would be:

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

But there is a problem with this approach, it doesn't work with digested images. So it's best to use a custom Icon and set the urls with rails helpers:

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

Then you would specify this custom icon whenever you add a new marker:

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

Remember to add .erb extension to your coffee/js file for the helpers to work.

回答5:

If you want to display the images in a view, then you have to use image_path in conjunction with image_tag. image_path() only returns the pathname of the image file. So, you would do this:

image_tag image_path('your_image.png')

回答6:

I had the same issue using DropZone.js. Instead of messing w/ the huge DropZone file, I just created a folder in /public named 'images' and placed my sprite images there. That is where DropZone expects them, and is why I was getting a '404' Not Found error for the sprite images.

回答7:

I have found that if you have just added the /app/assets/images folder, sprockets won't find it until you restart your app.

来源：https://stackoverflow.com/questions/17773761/rails-4-and-leaflet-assets-images-not-found