Ruby-on-rails Rails 3.1 和图像资产
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6213218/
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
Rails 3.1 and Image Assets
提问by Lee
I have put all my images for my admin theme in the assets folder within a folder called admin. Then I link to it like normal ie.
我已将我的管理主题的所有图像放在名为 admin 的文件夹内的资产文件夹中。然后我像往常一样链接到它，即。
# Ruby
image_tag "admin/file.jpg" .....
#CSS
.logo{ background:url('/assets/images/admin/logo.png');
FYI. Just for testing I am not using the asset_path tag just yet as I have not compiled my assets.
供参考。只是为了测试，我还没有使用 asset_path 标签，因为我还没有编译我的资产。
Ok all good so far until I decided to update an image. I replaced some colors but on reload the new styled image is not showing. If I view the image directly in the browser its still showing the old image. Going one step further I destroyed the admin images folder. But it has broken nothing all the images are still being displayed. And yes I have cleared my cache and have tried on multiple browsers.
到目前为止一切都很好，直到我决定更新图像。我更换了一些颜色，但在重新加载时没有显示新样式的图像。如果我直接在浏览器中查看图像，它仍然显示旧图像。更进一步，我销毁了管理图像文件夹。但它没有破坏任何图像仍在显示。是的，我已经清除了缓存并尝试了多个浏览器。
Is there some sort of image caching going on? This is just local development using pow to serve the pages.
是否有某种图像缓存正在进行？这只是使用 pow 为页面提供服务的本地开发。
Even destroying the whole images folder the images are still being served.
即使销毁整个图像文件夹，图像仍在提供。
Am I missing something?
我错过了什么吗？
回答by Lee McAlilly
In 3.1 you just get rid of the 'images' part of the path. So an image that lives in /assets/images/example.pngwill actually be accessible in a get request at this url - /assets/example.png
在 3.1 中，您只需删除路径的“图像”部分。因此，/assets/images/example.png实际上可以在此 url 的 get 请求中访问存在的图像-/assets/example.png
Because the assets/imagesfolder gets generated along with a new 3.1 app, this is the convention that they probably want you to follow. I think that's where image_tagwill look for it, but I haven't tested that yet.
因为该assets/images文件夹是与新的 3.1 应用程序一起生成的，所以这可能是他们希望您遵循的约定。我认为这就是image_tag寻找它的地方，但我还没有测试过。
Also, during the RailsConf keynote, I remember D2h saying the the public foldershould not have much in it anymore, mostly just error pages and a favicon.
另外，在 RailsConf 主题演讲中，我记得 D2h 说 the 不public folder应该再有太多内容了，主要是错误页面和一个 favicon。
回答by tybro0103
You'll want to change the extension of your css file from .css.scssto .css.scss.erband do:
您需要将 css 文件的扩展名从.css.scssto更改为.css.scss.erb并执行以下操作：
background-image:url(<%=asset_path "admin/logo.png"%>);
You may need to do a "hard refresh" to see changes. CMD+SHIFT+R on OSX browsers.
您可能需要执行“硬刷新”才能看到更改。OSX 浏览器上的 CMD+SHIFT+R。
In production, make sure
在生产中，确保
rm -rf public/assets
bundle exec rake assets:precompile RAILS_ENV=production
happens upon deployment.
部署时发生。
回答by Andrew
For what it's worth, when I did this I found that no folder should be include in the path in the css file. For instance if I have app/assets/images/example.png, and I put this in my css file...
值得一提的是，当我这样做时，我发现 css 文件的路径中不应该包含任何文件夹。例如，如果我有app/assets/images/example.png，我把它放在我的 css 文件中......
div.example { background: url('example.png'); }
... then somehow it magically works. I figured this out by running the rake assets:precompiletask, which just sucks everything out of all your load paths and dumps it in a junk drawer folder: public/assets. That's ironic, IMO...
......然后不知何故它神奇地起作用了。我通过运行rake assets:precompile任务来解决这个问题，它只是从所有加载路径中吸取所有内容并将其转储到垃圾抽屉文件夹中：public/assets. 具有讽刺意味的是，国际海事组织...
In any case this means you don't need to put any folder paths, everything in your assets folders will all end up living in one huge directory. How this system resolves file name conflicts is unclear, you may need to be careful about that.
在任何情况下，这意味着您不需要放置任何文件夹路径，您的资产文件夹中的所有内容最终都将位于一个巨大的目录中。该系统如何解决文件名冲突尚不清楚，您可能需要注意这一点。
Kind of frustrating there aren't better docs out there for this big of a change.
有点令人沮丧的是，没有更好的文档可以进行如此大的更改。
回答by lflores
In rails 4 you can now use a css and sass helper image-url:
在 rails 4 中，您现在可以使用 css 和 sass 助手 image-url：
div.logo {background-image: image-url("logo.png");}
If your background images aren't showing up consider looking at how you're referencing them in your stylesheets.
如果您的背景图像没有显示，请考虑查看如何在样式表中引用它们。
回答by Tilo
when referencing images in CSS or in an IMG tag, use image-name.jpg
在 CSS 或 IMG 标签中引用图像时，使用 image-name.jpg
while the image is really located under ./assets/images/image-name.jpg
而图像实际上位于 ./assets/images/image-name.jpg
回答by botbot
http://railscasts.com/episodes/279-understanding-the-asset-pipeline
http://railscasts.com/episodes/279-understanding-the-asset-pipeline
This railscast (Rails Tutorial video on asset pipeline) helps a lot to explain the paths in assets pipeline as well. I found it pretty useful, and actually watched it a few times.
这个 railscast（关于资产管道的 Rails 教程视频）也有助于解释资产管道中的路径。我发现它非常有用，实际上看了几遍。
The solution I chose is @Lee McAlilly's above, but this railscast helped me to understand why it works. Hope it helps!
我选择的解决方案是上面的@Lee McAllly，但是这个 railscast 帮助我理解了它为什么起作用。希望能帮助到你！
回答by benrugg
The asset pipeline in rails offers a method for this exact thing.
rails 中的资产管道为这件事提供了一种方法。
You simply add image_path('image filename') to your css or scss file and rails takes care of everything. For example:
您只需将 image_path('image filename') 添加到您的 css 或 scss 文件中，rails 会处理一切。例如：
.logo{ background:url(image_path('admin/logo.png'));
.logo{ background:url(image_path('admin/logo.png'));
(note that it works just like in a .erb view, and you don't use "/assets" or "/assets/images" in the path)
（请注意，它就像在 .erb 视图中一样工作，并且您不在路径中使用“/assets”或“/assets/images”）
Rails also offers other helper methods, and there's another answer here: How do I use reference images in Sass when using Rails 3.1?
Rails 还提供了其他辅助方法，这里还有另一个答案：How do I use reference images in Sass when using Rails 3.1?
