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");
结果是:图像无法显示。有人遇到过这种情况吗?如何解决这个问题?
当前回答
在Rails 4中,只需使用.hero { 背景图片:url(“picture.jpg”); }在你的style.css文件,只要背景图像是隐藏在app/assets/images。
其他回答
在css中
background: url("/assets/banner.jpg");
尽管原始路径是/assets/images/banner.jpg,但按照惯例,您必须在url方法中只添加/assets/
在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 4中,只需使用.hero { 背景图片:url(“picture.jpg”); }在你的style.css文件,只要背景图像是隐藏在app/assets/images。
在某些情况下,以下几点也适用
Logo {background: url(<%= asset_data_uri ' Logo .png' %>)}
来源:http://guides.rubyonrails.org/asset_pipeline.html
当使用宝石'sass-rails'时,在Rails 5, bootstrap 4中,以下对我有用,
在.scss文件:
background-image: url(asset_path("black_left_arrow.svg"));
视图文件(例如.html.slim):
style=("background-image: url(#{ show_image_path("event_background.png") })");