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

Question

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

/assets/logo-200a00a193ed5e297bb09ddd96afb953.png

然而，CSS仍然指出：

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

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

Answer 1

链接与Sass一起some nifty helpers你可以用来完成工作。如果样式表文件扩展名为.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")

Answer 2

不知道为什么，但只有对我有用的事情是使用 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（我已在我的项目中安装）。

Answer 3

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

Answer 4

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

尝试这样的事情：

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

古德勒克

Answer 5

在css中

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

虽然原始路径是/assets/images/banner.jpg，按照惯例，你必须在url方法中添加/ assets /

Answer 6

没有任何答案说明方式，当我有.css.erb扩展时，如何引用图像。对我来说，同时也在生产和开发中工作：

2.3.1 CSS and ERB

资产管道会自动评估 ERB 。这意味着如果您将erb扩展名添加到 CSS 资源（例如application.css.erb），则CSS规则中会提供asset_path等帮助程序：

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

请注意，结束标记不能是样式 - ％＆gt;。

Answer 7

只有这个代码段对我不起作用：

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

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

Answer 8

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

工作：

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桶中并从那里加载，但最终还是有所作为。

Answer 9

引用Rails documents我们发现有几种方法可以链接到来自css的图像。请转到第2.3.2节。

首先，如果它是一个sass文件，请确保您的css文件具有.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"

Answer 10

有趣的是，如果我使用'background-image'，它就不起作用了：

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

但只是'背景'，它确实：

background: url('picture.png');

Answer 11

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

logo {background：url（＆lt;％= asset_data_uri'logo.png'％＆gt;）}

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

Answer 12

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

.scss文件中的

：

ng-class

在查看文件中（例如.html.slim）：

<div>
     <div ng-class="{small: if-Your-condition-True}">
         Small text
     </div>
     <div ng-class="{big: if-Your-condition-True}">
          <p>Reall long text that can</p>
          <p>be several lines long</p>
     </div>
</div>

Answer 13

您可以添加到您的css .erb扩展程序。 Ej：style.css.erb

然后你可以把：

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

Answer 14

这对我有用：

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

Answer 15

在Rails 4中，只要将背景图像隐藏在app / assets / images中，只需在style.css文件中使用

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

。

< / p>

Answer 16

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

config.serve_static_assets = true

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

Answer 17

这应该让你每次都在那里。

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