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

/assets/logo-200a00a193ed5e297bb09ddd96afb953.png

然而,CSS仍然声明:

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

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


当前回答

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

其他回答

参考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"

链轮一起萨斯有一些漂亮的帮手,你可以用它来完成工作。链轮只会在样式表文件扩展名为.css时处理这些helper。或。css.sass。


图像特定的帮助器:

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

不可知论者的助手:

background-image: asset-url("logo.png", image)
background-image: asset-url($asset, $asset-type)

或者如果你想在css文件中嵌入图像数据:

background-image: asset-data-url("logo.png")

你可以添加到你的css .erb扩展名。Ej: style.css.erb

然后你可以放:

background: url(<%= asset_path 'logo.png' %>) no-repeat;

默认情况下,Rails 4不会为您的资产服务。要启用此功能,您需要进入配置/应用程序。Rb,加上这一行:

config.serve_static_assets = true

https://devcenter.heroku.com/articles/rails-4-asset-pipeline#serve-assets

没有一个答案是关于。css的。Erb扩展,如何引用图像。对我来说,我同时从事生产和开发工作:

2.3.1 CSS和ERB

资产管道自动评估ERB。这意味着如果你添加一个erb扩展到一个CSS资产(例如,application.css.erb),那么像asset_path这样的助手在你的CSS规则中是可用的:

.class { background-image: url(<%= asset_path 'image.png' %>) }

这将写入被引用的特定资产的路径。在这个例子中,在一个资源加载路径中有一个图像是有意义的,比如app/assets/images/image.png,这里将引用它。如果此图像已作为指纹文件在公共/资产中可用,则会引用该路径。

如果您想使用数据URI(一种将图像数据直接嵌入到CSS文件中的方法),您可以使用asset_data_uri帮助器。

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

这将在CSS源中插入格式化正确的数据URI。

注意,结束标记的样式不能是-%>。