Heroku 上的 Rails 4 有一个奇怪的问题。编译图像时，它们会添加散列，但 CSS 中对这些文件的引用没有调整正确的名称。这就是我的意思。我有一个名为 logo.png 的文件。然而，当它出现在 heroku 上时，它被视为：
/assets/logo-200a00a193ed5e297bb09ddd96afb953.png
但是 CSS 仍然声明：
background-image:url("./logo.png");
结果：图像不显示。有人遇到这个吗？如何解决？
问问题
167167 次
17 回答
404
Sprockets 和 Sass 有一些漂亮的助手可以用来完成工作。如果您的样式表文件扩展名为或， Sprockets只会处理这些帮助程序。.css.scss.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")
于 2013-03-23T20:30:32.813 回答
60
不知道为什么，但唯一对我有用的是使用asset_path 而不是image_path ，即使我的图像位于assets/images/目录下：
例子：
app/assets/images/mypic.png
在红宝石中：
asset_path('mypic.png')
在 .scss 中：
url(asset-path('mypic.png'))
更新：
结果发现这些资产助手来自sass-rails gem（我已经安装在我的项目中）。
于 2013-10-07T23:17:55.220 回答
37
在 Rails 4 中，您可以像这样轻松引用位于文件中的assets/images/图像.SCSS：
.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");
于 2013-09-24T15:56:20.923 回答
25
哈希是因为资产管道和服务器优化缓存 http://guides.rubyonrails.org/asset_pipeline.html
尝试这样的事情：
background-image: url(image_path('check.png'));
祝你好运
于 2013-03-23T20:55:46.793 回答
11
在 CSS 中
background: url("/assets/banner.jpg");
虽然原始路径是 /assets/images/banner.jpg，但按照惯例，您只需在 url 方法中添加 /assets/
于 2013-12-19T06:23:57.597 回答
10
没有一个答案是关于方式，当我有.css.erb扩展名时，如何引用图像。对我来说，我也在生产和开发方面工作过：
资产管道自动评估ERB。这意味着如果您将 erb 扩展添加到CSS资产（例如， ），那么在您的 CSS 规则中可以使用application.css.erb类似的助手：asset_path
.class { background-image: url(<%= asset_path 'image.png' %>) }
这将写入被引用的特定资产的路径。在此示例中，在其中一个资产加载路径中包含图像是有意义的，例如app/assets/images/image.png，将在此处引用。如果此图像已public/assets作为指纹文件提供，则引用该路径。
如果你想使用数据 URI——一种将图像数据直接嵌入到CSS文件中的方法——你可以使用asset_data_urihelper.
.logo { background: url(<%= asset_data_uri 'logo.png' %>) }
这会将格式正确的数据 URI 插入 CSS 源。
请注意，结束标签不能是 -%> 样式。
于 2015-06-15T16:26:12.310 回答
5
只有这个片段对我不起作用：
background-image: url(image_path('transparent_2x2.png'));
但是将 stylename.scss 重命名为stylename.css.scss对我有帮助。
于 2013-09-24T06:46:22.823 回答
4
几个小时后我发现了什么：
作品：
background-image: url(image_path('transparent_2x2.png'));
// how to add attributes like repeat, center, fixed?
上面的输出类似于："/assets/transparent_2x2-ec47061dbe4fb88d51ae1e7f41a146db.png"
注意前面的"/"，它在引号内。还要注意您的样式表.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 存储桶中并从那里加载，但最终还是有所进展。
于 2013-09-20T19:18:00.767 回答
4
参考Rails 文档，我们看到有几种方法可以从 css 链接到图像。只需转到第 2.3.2 节。
首先，确保您的 css 文件具有 .scss 扩展名（如果它是 sass 文件）。
接下来就可以使用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"
于 2016-08-05T19:47:58.803 回答
3
有趣的是，如果我使用“背景图像”，它就不起作用：
background-image: url('picture.png');
但只是“背景”，它确实：
background: url('picture.png');
于 2014-06-22T00:45:06.680 回答
1
在某些情况下，以下也可以适用
logo { 背景： url(<%=asset_data_uri 'logo.png' %>) }
于 2015-09-25T06:42:29.763 回答
1
在 Rails 5 引导程序 4 中使用 gem 'sass-rails' 时，以下内容对我有用，
在 .scss 文件中：
background-image: url(asset_path("black_left_arrow.svg"));
在视图文件中（例如 .html.slim）：
style=("background-image: url(#{ show_image_path("event_background.png") })");
于 2019-06-28T06:22:09.790 回答
0
默认情况下，Rails 4 不会为您的资产提供服务。要启用此功能，您需要进入 config/application.rb 并添加以下行：
config.serve_static_assets = true
https://devcenter.heroku.com/articles/rails-4-asset-pipeline#serve-assets
于 2014-03-31T19:22:55.077 回答
0
这应该让你每次都到达那里。
background-image: url(<%= asset_data_uri 'transparent_2x2.png'%>);
于 2014-03-14T13:50:57.777 回答
0
在 Rails 4 中，只需使用
.hero {
background-image: url("picture.jpg");
}
于 2015-06-20T22:57:02.013 回答
0
这对我有用：
background: #4C2516 url('imagename.png') repeat-y 0 0;
于 2016-08-06T21:54:20.477 回答
0
您可以添加到您的 css .erb 扩展名。Ej：style.css.erb
然后你可以放：
background: url(<%= asset_path 'logo.png' %>) no-repeat;
于 2017-03-22T05:12:03.023 回答