Ruby on rails Rails：如何在Rails4中引用CSS中的图像

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

/assets/logo-200a00a193ed5e297bb09ddd96afb953.png

但是CSS仍然声明：

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

---

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

链轮和Sass可用于完成工作。只有当样式表文件扩展名为

.css.scss

或

.css.sass

时，链轮才会处理这些帮助程序

---

图像特定帮助程序：

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

background-image: asset-url("logo.png", image)
background-image: asset-url($asset, $asset-type)

app/assets/images/mypic.png

asset_path('mypic.png')

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

---

不可知论帮助者：

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

background-image: asset-url("logo.png", image)
background-image: asset-url($asset, $asset-type)

app/assets/images/mypic.png

asset_path('mypic.png')

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

---

或者，如果要在css文件中嵌入图像数据：

background-image: asset-data-url("logo.png")

---

散列是因为资产管道和服务器优化了缓存

试着这样做：

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

.some-div {
  background-image: url(image-path('pretty-background-image.jpg'));
}

---

祝你好运

经过几个小时的捣乱，我发现了什么：

作品：

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 helper。图像位于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(image_path('transparent_2x2.png'));

---

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

在Rails 4中，您可以很容易地在

.scss

文件中引用

资产/images/

中的图像，如下所示：

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

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

---

不知道为什么，但唯一对我有效的方法是使用资产路径而不是图像路径，即使我的图像位于资产/图像目录下：

示例：

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

background-image: asset-url("logo.png", image)
background-image: asset-url($asset, $asset-type)

app/assets/images/mypic.png

asset_path('mypic.png')

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

红宝石中的

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

background-image: asset-url("logo.png", image)
background-image: asset-url($asset, $asset-type)

app/assets/images/mypic.png

asset_path('mypic.png')

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

In.scss:

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

background-image: asset-url("logo.png", image)
background-image: asset-url($asset, $asset-type)

app/assets/images/mypic.png

asset_path('mypic.png')

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

---

更新：

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

background-image: asset-url("logo.png", image)
background-image: asset-url($asset, $asset-type)

app/assets/images/mypic.png

asset_path('mypic.png')

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

我发现这些资产助手来自gem（我在项目中安装了gem）

css中的

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

---

尽管原始路径是/assets/images/banner.jpg，但按照惯例，您必须在url方法中只添加/assets/，这样每次都可以到达那里

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

背景图像：url（）；

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

config.serve_static_assets = true

---

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

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

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

background: url('picture.png');

---

没有一个答案是关于如何使用

.css.erb

扩展名来引用图像的。对于我来说，我在生产和开发方面都有工作：

资产管道自动评估ERB。这意味着如果您将erb扩展添加到CSS资源（例如，

application.CSS.erb

），则在CSS规则中可以使用

asset\u path

等帮助程序：

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

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

---

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

在Rails 4中，只需使用

.hero即可{
背景图片：url（“picture.jpg”）；
}

在style.css文件中，只要背景图像隐藏在app/assets/images中。

在某些情况下，也可以应用以下内容：

徽标{背景：url（）} 来源：

参考css，我们发现有几种方法可以链接到css中的图像。只需转到第2.3.2节

首先，如果您的css文件是sass文件，请确保其扩展名为.scss

接下来，您可以使用ruby方法，它非常难看：

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

最后，您可以使用一般形式：

asset-url("rails.png") returns url(/assets/rails.png)
asset-path("rails.png") returns "/assets/rails.png"

这对我很有用：

background:"4C2516 url（'imagename.png'）重复-y 0；

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

然后你可以把：

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

background:url（）不重复；

当使用gem'sass-rails'时，在rails 5的bootstrap 4中，以下内容对我很有用：

在.scss文件中：

background-image: asset-data-url("logo.png")

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

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

---

仅供参考，Heroku已经确认这是一个bug。。。他们正在研究解决方案。你能提供最新情况吗？我也有同样的问题，非常好的rails解决方案。谢谢@YarinYes！在我的头撞到墙上几个小时后，您的“资产路径”解决方案终于在我的.css.scss文件上对我起作用了<代码>背景图像：url（资产路径（'off.png'））对于使用Rails 6的建筑，您不需要安装

sass Rails

gem。在Rails 4应用程序中将.css文件更改为.css.scss文件后，

资产数据url

适用于我。谢谢@是的，据我所知，这只适用于.scss和.sass文件。杰夫：如果您的资产url选项设置正确，其他文件也可以。它不适用于

资产数据url

，因为它将整个文件嵌入样式表中。类似于@fatman13，因为我使用了

sass rails

，我最终将文件扩展名

.scss

添加到有问题的.css文件中，因此它们都以

.css.scss

结尾，然后替换了

url的所有实例（'blah.png'）

带有

url（资产路径（'blah.png'））

（在我的例子中，所有blah.png都在

/vendor

ed文件夹中）。

资产url（$asset）

应该用于链轮3，带有

$asset type

的版本可能适用于一些较旧的v