【问题标题】：Rails: How to reference images in CSS within Rails 4Rails：如何在 Rails 4 中引用 CSS 中的图像
【发布时间】：2013-02-21 20:18:58
【问题描述】：

在 Heroku 上的 Rails 4 有一个奇怪的问题。编译图像时，它们会添加散列，但 CSS 中对这些文件的引用没有调整正确的名称。这就是我的意思。我有一个名为 logo.png 的文件。然而，当它出现在 heroku 上时，它被视为：

/assets/logo-200a00a193ed5e297bb09ddd96afb953.png

但是 CSS 仍然声明：

background-image:url("./logo.png");

结果：图像不显示。有人遇到这个吗？如何解决？

【问题讨论】：

仅供参考，Heroku 已确认这是一个错误......他们正在研究解决方案
你能提供一个更新吗？我也有同样的问题

标签： ruby-on-rails heroku ruby-on-rails-4

【解决方案1】：

使用 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") })");

【讨论】：

【解决方案2】：

这对我有用：

background: #4C2516 url('imagename.png') repeat-y 0 0;

【讨论】：

【解决方案3】：

Sprockets 与 Sass 一起拥有 some nifty helpers，您可以使用它来完成工作。如果您的样式表文件扩展名是.css.scss 或.css.sass，Sprockets 将仅处理这些帮助程序。

图像特定助手：

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

【讨论】：

asset-data-url 在 Rails 4 应用程序中将 .css 文件更改为 .css.scss 文件后为我工作。谢谢！
@fatman13 是的，据我所知，这只适用于 .scss 和 .sass 文件。
Jeff：如果您的资产 url 选项设置正确，其他人确实可以工作。它不适用于asset-data-url，因为它将整个文件嵌入到样式表中。
类似于@fatman13，因为我使用的是sass-rails，我最终将文件扩展名.scss添加到有问题的.css文件中，所以它们都以.css.scss结尾，然后被替换url('blah.png') 和 url(asset-path('blah.png')) 的所有实例（在我的情况下，所有 blah.png 都在 /vendored 文件夹中）。
asset-url($asset) 应该用于 sprockets 3，带有$asset-type 的版本可能适用于某些旧版本

【解决方案4】：

您可以添加到您的 css .erb 扩展名。 Ej: style.css.erb

那么你可以放：

background: url(<%= asset_path 'logo.png' %>) no-repeat;

【讨论】：

【解决方案5】：

参考Rails documents，我们看到有几种方法可以链接到 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"

【讨论】：

【解决方案6】：

在某些情况下，以下也可以适用

logo { 背景：url() }

来源：http://guides.rubyonrails.org/asset_pipeline.html

【讨论】：

【解决方案7】：

在 Rails 4 中，只需使用

.hero { background-image: url("picture.jpg"); }

在您的 style.css 文件中，只要背景图片位于 app/assets/images 中。

【讨论】：

完整阅读问题

【解决方案8】：

没有一个答案说明我何时拥有.css.erb 扩展名，如何引用图像。对我来说，生产和开发都工作过：

2.3.1 CSS and ERB

资产管道会自动评估 ERB。这意味着如果您将 erb 扩展添加到 CSS 资产（例如，application.css.erb），那么像 asset_path 这样的助手可以在您的 CSS 规则中使用：

.class { background-image: url(<%= asset_path 'image.png' %>) }

这会写入被引用的特定资产的路径。在此示例中，在资产加载路径之一中包含图像是有意义的，例如 app/assets/images/image.png，将在此处引用。如果此图像已在 public/assets 中作为指纹文件提供，则引用该路径。

如果您想使用数据 URI - 一种将图像数据直接嵌入 CSS 文件的方法 - 您可以使用 asset_data_uri 帮助器。

.logo { background: url(<%= asset_data_uri 'logo.png' %>) }

这会将格式正确的数据 URI 插入 CSS 源。

注意结束标签不能是 -%> 样式。

【讨论】：

【解决方案9】：

不知道为什么，但唯一对我有用的是使用 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 方式解决方案。谢谢@Yarin
是的！在把我的头撞到墙上几个小时之后，你的“资产路径”解决方案终于在我的 .css.scss 文件上为我工作了！ background-image: url(asset-path('off.png'))
对于那些使用 Rails 6 构建的用户，您不需要安装 sass-rails gem。助手开箱即用。

【解决方案10】：

有趣的是，如果我使用“背景图像”，它就不起作用：

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

但只是“背景”，它确实：

background: url('picture.png');

【讨论】：

但这仅适用于 scss 文件，而不是放置在 div 内的样式属性分配中...我很困惑

【解决方案11】：

默认情况下，Rails 4 不会为您的资源提供服务。要启用此功能，您需要进入 config/application.rb 并添加以下行：

config.serve_static_assets = true

https://devcenter.heroku.com/articles/rails-4-asset-pipeline#serve-assets

【讨论】：

这行得通，但这不会抵消预编译资产的好处吗？

【解决方案12】：

这应该让你每次都到达那里。

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

【讨论】：

【解决方案13】：

在css中

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

虽然原始路径是 /assets/images/banner.jpg，但按照惯例，您只需在 url 方法中添加 /assets/

【讨论】：

使用纯 ol CSS，我以为我疯了 - 谢谢！
这不会在生产中编译
哇，谢谢，这不是很直观。所以我猜资产路径中的所有资产（vendor/assets、app/assets、lib/assets 等）在 prepossessing 完成后都会合并到一个资产文件夹中？
这在生产环境中不起作用，因为在生产环境中，您的资产在编译时会在名称末尾附加一个 MD5 哈希，并且在典型设置下，/assets/banner.jpg 将不起作用。相反，它将类似于/assets/banner-f719451f1e0ddd15f153c4eedde044b2.jpg。 TL;DR 不要使用这个。

【解决方案14】：

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

【讨论】：

@MikeLyons：刚刚在一个全新的 Rails 4.1 项目上对其进行了测试并部署到 Heroku，它对我来说运行良好。你一定在production.rb上碰过什么。

【解决方案15】：

只有这个 sn-p 对我不起作用：

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

但是将 stylename.scss 重命名为 stylename.css.scss 对我有帮助。

【讨论】：

【解决方案16】：

我在玩了几个小时后发现了什么：

作品：

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

// how to add attributes like repeat, center, fixed?

上面的输出类似于："/assets/transparent_2x2-ec47061dbe4fb88d51ae1e7f41a146db.png"

注意前导“/”，并且它在引号内。还要注意 yourstylesheet.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 存储桶中并从那里加载，但最终还是有所进展。

【讨论】：

对于任何来到这里但仍然遇到问题的人：确保您的 css 文件已更新，并且您没有在本地预编译资产并忘记更新它们。
Hartwig - 这是什么意思？您的意思是您必须再次运行预编译才能使用此方法？我已经尝试了这篇文章中建议的所有内容（一切），但没有任何东西对我有用

【解决方案17】：

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

试试这样的：

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

祝你好运

【讨论】：

在您的情况下，文件扩展名应该是什么？只有.css 对我不起作用。
为我工作！谢谢兄弟！