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

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');

其他回答

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

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

只有这个片段不适合我:

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

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

在css中

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

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

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

试试这样做:

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

古德勒克

在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");

推荐文章