10

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

4

7 回答 7

18

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

image_path('marker-shadow.png')

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

于 2013-07-21T15:26:06.833 回答
8

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')“知道”图像的位置

于 2013-07-21T15:30:08.223 回答
3

我已将 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 的默认值。

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

于 2013-10-27T21:42:35.243 回答
3

发生这种情况是因为 Leaflet 试图猜测图像路径。但是您可以在初始化程序代码中设置默认标记图像路径，如下所示：

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

请记住为您的咖啡/js 文件添加.erb扩展名，以便帮助程序工作。

于 2016-05-28T04:19:39.480 回答
2

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

image_tag image_path('your_image.png')
于 2013-11-16T04:06:36.283 回答
2

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

于 2014-10-30T16:59:50.377 回答
1

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

于 2014-11-22T05:51:24.557 回答