Rails 4 和 Leaflet：找不到资产/图像？答案

【问题标题】：Rails 4 and Leaflet: assets/images not found?Rails 4 和 Leaflet：找不到资产/图像？
【发布时间】：2013-07-21 15:10:54
【问题描述】：

我遇到了一个真正不应该成为问题的问题。由于某种原因，我在 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。

我在这里错过了什么？

使用 Rails 4。

【问题讨论】：

标签： ruby-on-rails leaflet asset-pipeline

【解决方案1】：

只需使用此助手获取您的图像：

image_path('marker-shadow.png')

rails生成的路径是“/assets/marker-shadow.png”，没有'images'文件夹。

【讨论】：

呃。就是这样。当我在地图上创建标记时，Leaflet.js 正在请求默认图标，但 Leaflet 不知道 Rails 资产管道的东西。我必须使用使用 image_path 帮助器的 iconUrl 指定自定义图标。谢谢！
如果要在视图中显示图像，则必须将 image_path 与 image_tag 结合使用。 image_path() 只返回图像文件的路径名。所以，你会这样做： image_tag image_path('your_image.png')
我仍然遇到同样的问题。如果您将传单集成到 rails 项目中，我们不应该将它们放在 vendor 文件夹中吗？使用vendor 文件夹中的文件预编译所有内容并在所有默认传单文件中具有正确路径访问权限的正确方法是什么？它在我的开发环境中工作，但预编译后生产遇到同样的问题。

【解决方案2】：

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 和 asset pipeline framework 的映射

注意助手image_tag('marker-icon-2x.png')“知道”图像在哪里

【讨论】：

【解决方案3】：

我已将网址作为数据属性添加到 #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 的默认值。

您也可以通过erb 或其他方式发送您的javascript，而不是数据属性，但我更喜欢这个。

【讨论】：

【解决方案4】：

这是因为 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 并使用rails helpers 设置url：

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 文件中，以便帮助程序工作。

【讨论】：

【解决方案5】：

如果要在视图中显示图像，则必须将 image_path 与 image_tag 结合使用。 image_path() 只返回图像文件的路径名。所以，你会这样做：

image_tag image_path('your_image.png')

【讨论】：

【解决方案6】：

我在使用 DropZone.js 时遇到了同样的问题。我没有弄乱 / 巨大的 DropZone 文件，而是在 /public 中创建了一个名为“images”的文件夹，并将我的精灵图像放在那里。这就是 DropZone 所期望的，这也是为什么我收到精灵图像的“404”未找到错误的原因。

【讨论】：

【解决方案7】：

我发现如果您刚刚添加了 /app/assets/images 文件夹，则 sprockets 将在您重新启动应用程序之前找不到它。

【讨论】：