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

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。

其他回答

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

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

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

background: url('picture.png');

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

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

当使用宝石'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") })");

在css中

background: url("/assets/banner.jpg");

尽管原始路径是/assets/images/banner.jpg，但按照惯例，您必须在url方法中只添加/assets/

推荐文章