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

/assets/logo-200a00a193ed5e297bb09ddd96afb953.png

然而,CSS仍然声明:

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

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


当前回答

有趣的是,如果我使用'background-image',它不起作用:

background-image: url('picture.png');

但是仅仅是“背景”,它就做到了:

background: url('picture.png');

其他回答

散列是因为资产管道和服务器优化缓存 http://guides.rubyonrails.org/asset_pipeline.html

试试这样做:

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

古德勒克

只有这个片段不适合我:

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

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

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

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

不知道为什么,但唯一对我有用的是使用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(我已经安装在我的项目中)。

参考Rails文档,我们可以看到有几种方法可以链接到css中的图像。请参阅第2.3.2节。

首先,如果您的css文件是sass文件,请确保它具有.scss扩展名。

接下来,你可以使用ruby方法,这真的很难看:

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

或者你可以使用更好的特定形式:

image-url("rails.png") returns url(/assets/rails.png)
image-path("rails.png") returns "/assets/rails.png"

最后,你可以使用一般形式:

asset-url("rails.png") returns url(/assets/rails.png)
asset-path("rails.png") returns "/assets/rails.png"