Rails 3.1和映像资产

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的文件夹内的assets文件夹中。然后我像普通的ie那样链接到它。

# 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.

到目前为止一切都很好，直到我决定更新一个图像。我替换了一些颜色，但在重载时，新的样式图像没有显示。如果我直接在浏览器中查看图像，它仍然显示旧图像。更进一步，我销毁了admin images文件夹。但是它并没有破坏所有的图像仍然被显示。是的，我已经清除了我的缓存并尝试了多种浏览器。

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?

我遗漏了什么东西?

7 个解决方案

#1

226

In 3.1 you just get rid of the 'images' part of the path. So an image that lives in /assets/images/example.png will actually be accessible in a get request at this url - /assets/example.png

在3.1中，你只需要去掉路径的“图像”部分。一个存在于/assets/image /example中的图像。png实际上可以在这个url /assets/example.png的get请求中访问

Because the assets/images folder 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_tag will 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 folder should not have much in it anymore, mostly just error pages and a favicon.

另外，在RailsConf keynote中，我记得D2h说公共文件夹不应该有太多内容，主要是错误页面和图标。

#2

You'll want to change the extension of your css file from .css.scss to .css.scss.erb and do:

您将希望将css文件的扩展名从.css中更改。scss .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.

您可能需要进行“硬刷新”以查看更改。CMD + SHIFT + R在OSX浏览器。

In production, make sure

在生产、确保

rm -rf public/assets    
bundle exec rake assets:precompile RAILS_ENV=production

happens upon deployment.

发生在部署。

#3

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/image /example。我把这个放到css文件中…

div.example { background: url('example.png'); }

... then somehow it magically works. I figured this out by running the rake assets:precompile task, 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 asset:precompile task来解决这一问题，该任务从所有的加载路径中提取所有内容，并将其转储到一个垃圾折叠文件夹中: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.

有点让人沮丧的是，没有更好的文档可以做这么大的改变。

#4

In rails 4 you can now use a css and sass helper image-url:

在rails 4中，您现在可以使用css和sass助手映像-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.

如果您的背景图像没有出现，请考虑如何在样式表中引用它们。

#5

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下

#6

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 McAlilly在上面，但是这个railscast帮助我理解它为什么有效。希望它可以帮助!

#7

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 {背景: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还提供了其他辅助方法，这里还有另外一个答案:在使用Rails 3.1时，如何在Sass中使用引用图像?

#1

226