Heroku上的Rails 4有一个奇怪的问题。编译图像时，会在其中添加哈希值，但是CSS中对这些文件的引用未调整适当的名称。这就是我的意思。我有一个名为logo.png的文件。但是，当它出现在heroku上时，它被视为：

/assets/logo-200a00a193ed5e297bb09ddd96afb953.png

但是CSS仍然指出：

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

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

链轮和Sass都有一些漂亮的助手，您可以用来完成工作。仅当您的样式表文件扩展名为.css.scss或时，Sprockets 才会处理这些帮助器.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")

不知道为什么，但使用该工作对我来说唯一的事情就是asset_path 代替的IMAGE_PATH，即使我的图像是在资产/图像/目录：

例：

app/assets/images/mypic.png

在Ruby中：

asset_path('mypic.png')

在.scss中：

url(asset-path('mypic.png'))

更新：

事实证明，这些资产助手来自sass-rails gem（我已经在项目中安装了它）。

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

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

尝试这样的事情：

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

祝好运

在CSS

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

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

没有答案能说明我何时进行.css.erb扩展时如何引用图像的方法。对我来说，也从事生产和开发工作：

2.3.1 CSS和ERB

资产管道自动评估ERB。这意味着，如果您将erb扩展名添加到CSS资产（例如application.css.erb），则asset_pathCSS规则中将提供类似helper的帮助：

.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源。

请注意，结束标记不能为-％>样式。

仅此代码段对我不起作用：

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

但是将stylename.scss重命名为stylename.css.scss可以帮助我。

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

经过数小时的捣蛋之后，我发现了什么：

作品：

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存储桶中并从那里加载，但最终有了进展。

有趣的是，如果我使用“背景图像”，则无法使用：

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

但是只是“背景”，它可以：

background: url('picture.png');

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

徽标{背景：url（<％= asset_data_uri'logo.png'％>）}}

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

当使用宝石“ sass-rails”时，在Rails 5，引导程序4中，以下对我有用：

在.scss文件中：

    background-image: url(asset_path("black_left_arrow.svg"));

在视图文件中（例如.html.slim）：

    style=("background-image: url(#{ show_image_path("event_background.png") })");

这应该使您每次都到那里。

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

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

config.serve_static_assets = true

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

在Rails 4中，只需使用

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

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

然后，您可以输入：

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

这为我工作：

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