Ruby-on-rails Rails 4 和传单:找不到资产/图像?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/17773761/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-09-02 22:21:31  来源:igfitidea点击:

Rails 4 and Leaflet: assets/images not found?

ruby-on-railsleafletasset-pipeline

提问by mikewilliamson

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.

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

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.

这真的应该是一个脑残的简单修复......最多重新启动服务器。我已经重新启动了服务器,我已经检查了文件权限以确保文件对它们具有合理的权限......当我加载我的页面时我仍然得到 404。

What am I missing here?

我在这里缺少什么?

Using Rails 4.

使用导轨 4。

回答by Nanego

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.

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

回答by okliv

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

app/assets/images/您可以通过直接路径访问文件夹中的所有内容

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

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

有资产助手可以在 erb 中使用它:

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

for images inside scss it becomes:

对于 scss 中的图像,它变为:

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

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

因为文件夹app/assets/[images||stylesheets||javascripts]就像一个/assets带有资产管道框架的文件夹一样映射

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

请注意,助手image_tag('marker-icon-2x.png')“知道”图像的位置

回答by iGEL

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

我已将 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')

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

然后我在设置标记时访问这些值(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)

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.

最后 4 个属性为图像设置了一些元数据,否则图像中心将设置为该位置而不是标记的尖端。这些值是传单 0.6.4 的默认值。

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

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

回答by Mauricio Pasquier Juan

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

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

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 Iconand set the urls with rails helpers:

但是这种方法有一个问题,它不适用于消化图像。所以最好使用自定义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' %>"
})

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 .erbextension to your coffee/js file for the helpers to work.

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

回答by Adrien Lamothe

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_path 与image_tag结合使用。image_path() 只返回图像文件的路径名。所以,你会这样做:

image_tag image_path('your_image.png')

回答by David

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.

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

回答by joshwa

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

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