Heroku上的Rails 4有一个奇怪的问题。当图像被编译时,它们被添加了散列,但从CSS中引用这些文件时没有适当的名称调整。这就是我的意思。我有一个叫logo。png的文件。然而,当它出现在heroku上时,它被视为:
/assets/logo-200a00a193ed5e297bb09ddd96afb953.png
然而,CSS仍然声明:
background-image:url("./logo.png");
结果是:图像无法显示。有人遇到过这种情况吗?如何解决这个问题?
Heroku上的Rails 4有一个奇怪的问题。当图像被编译时,它们被添加了散列,但从CSS中引用这些文件时没有适当的名称调整。这就是我的意思。我有一个叫logo。png的文件。然而,当它出现在heroku上时,它被视为:
/assets/logo-200a00a193ed5e297bb09ddd96afb953.png
然而,CSS仍然声明:
background-image:url("./logo.png");
结果是:图像无法显示。有人遇到过这种情况吗?如何解决这个问题?
当前回答
你可以添加到你的css .erb扩展名。Ej: style.css.erb
然后你可以放:
background: url(<%= asset_path 'logo.png' %>) no-repeat;
其他回答
在css中
background: url("/assets/banner.jpg");
尽管原始路径是/assets/images/banner.jpg,但按照惯例,您必须在url方法中只添加/assets/
不知道为什么,但唯一对我有用的是使用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 4中,你可以像这样在你的.SCSS文件中引用位于assets/images/中的图像:
.some-div {
background-image: url(image-path('pretty-background-image.jpg'));
}
当你以开发模式启动应用程序时(localhost:3000),你应该会看到如下内容:
background-image: url("/assets/pretty-background-image.jpg");
在生产模式下,你的资产将有缓存助手编号:
background-image: url("/assets/pretty-background-image-8b313354987c309e3cd76eabdb376c1e.jpg");
参考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"
我摆弄了几个小时后发现:
工作原理:
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桶里,然后从那里加载,但最后还是有了一些东西。