Rails:如何在Rails 4中引用CSS中的图像

Heroku上的Rails 4有一个奇怪的问题。当图像被编译时，它们被添加了散列，但从CSS中引用这些文件时没有适当的名称调整。这就是我的意思。我有一个叫logo。png的文件。然而，当它出现在heroku上时，它被视为:

/assets/logo-200a00a193ed5e297bb09ddd96afb953.png

然而，CSS仍然声明:

background-image:url("./logo.png");

结果是:图像无法显示。有人遇到过这种情况吗?如何解决这个问题?

当前回答

我摆弄了几个小时后发现:

工作原理:

background-image: url(image_path('transparent_2x2.png')); 

// how to add attributes like repeat, center, fixed?

上面的输出类似于:“/assets/transparent_2x2-ec47061dbe4fb88d51ae1e7f41a146db.png”

注意前面的“/”，它在引号内。还要注意stylesheet.css.scss中的scss扩展和image_path帮助器。图片在app/assets/images目录下。

不工作:

background: url(image_path('transparent_2x2.png') repeat center center fixed;

无效属性:

background:url(/assets/pretty_photo/default/sprite.png) 2px 1px repeat center fixed;

我最后的办法是把这些放到我的公共s3桶里，然后从那里加载，但最后还是有了一些东西。

其他回答

只有这个片段不适合我:

background-image: url(image_path('transparent_2x2.png'));

但是要重命名stylename。SCSS到stylename.css.scss帮助我。

不知道为什么，但唯一对我有用的是使用asset_path而不是image_path，即使我的图像是在assets/images/目录下:

例子:

app/assets/images/mypic.png

在Ruby中:

asset_path('mypic.png')

在.scss:

url(asset-path('mypic.png'))

更新:

弄清楚了-原来这些资产助手来自sass-rails gem(我已经安装在我的项目中)。

在某些情况下，以下几点也适用

Logo {background: url(<%= asset_data_uri ' Logo .png' %>)}

来源:http://guides.rubyonrails.org/asset_pipeline.html

这应该能让你每次都做到。

background-image: url(<%= asset_data_uri 'transparent_2x2.png'%>);

在Rails 4中，只需使用.hero { 背景图片:url(“picture.jpg”); }在你的style.css文件，只要背景图像是隐藏在app/assets/images。

推荐文章