Rails：从 CSS 加载图像答案

【问题标题】：Rails: Load image from CSSRails：从 CSS 加载图像
【发布时间】：2013-01-04 21:01:40
【问题描述】：

在我看来，我可以使用以下代码行加载图像：<div id="bglion"><%= image_tag("BG-LION6.png")%></div>（这可行），但我想从 CSS 文件加载图像。

读完arround，我试过这个：

#bglion {src: background:url('BG-LION6.png');}
#bglion {src: asset-url('BG-LION6.png');}
#bglion {src: asset-url('BG-LION6.png', image);}

...但是图片不会加载到页面上。我怎样才能让它发挥作用？

（图片在/assets/images）

【问题讨论】：

您使用的是哪个版本的 Rails？你的图片是在public 目录还是assets 目录？这个 CSS 是否也在您的 assets 目录中的 CSS 文件中？
我使用的是 Rails 3.2，图片在 /assets/images 中
如果您的图片位于/assets/images/BG-LION6.png 并且您的CSS 在位于/assets/stylesheets/ 的样式表中，那么它应该是#bglion {background:url('BG-LION6.png');}。
我的图片位于该路径，而我的样式表位于/assets/stylesheets/。我曾尝试使用#bglion {background:url('BG-LION6.png');}，但没有成功。我只是无法理解它可能是什么......
试试这个#bglion {background:pink url('BG-LION6.png');}。如果您在希望看到图像的屏幕上看到粉红色，请告诉我。

【解决方案1】：

我认为你必须做几件事。你的 CSS 可能应该是这样的：

#bglion { background: image-url('BG-LION6.PNG'); }

background 是您实际尝试设置的 CSS 属性。 src 不是 CSS 属性。 image-url 是一个指向您的图像资产文件夹的 Rails 路径助手。我相信如果你只使用asset-url 它指向你的整个资产文件夹，你仍然需要指定你的图像在图像文件夹中。

其次，如果您的div 中不再包含图像，它将折叠到宽度和高度为 0，因为无法定义其尺寸。您必须向包装器 div 添加更多 CSS 以定义图像的尺寸。所以是这样的：

#bglion { background: image-url('BG-LION6.PNG'); width: 100px; height: 100px; }

【讨论】：

【解决方案2】：

尝试这样做：

#bglion { background: url("/BG-LION6.png"); }

或

#bglion { background: url("/assets/BG-LION6.png"); }

取决于您使用的 Rails 版本以及您将资源设置在哪个文件夹。

访问资产时，您应该始终将路径设为绝对路径而不是相对路径。

【讨论】：

我总是将路径设为相对路径，即 #bglion { background: url("BG-LION6.png"); } 而不是绝对路径。总是让它绝对化的原因是什么？
在这种情况下并不重要，因为默认情况下样式表总是来自您的资产文件夹，但如果它们改变位置，它们将指向您的样式表文件夹并会中断。这仅在您更改默认配置时才会发生，并且在 99% 的情况下都不会发生。
@SandersKY 抱歉，我之前的评论不正确，所以我删除了它。

【解决方案3】：

您可以将您的 css 文件更改为具有 css.erb 扩展名，然后执行类似的操作

#bglion {
background-image: url(<%=asset_path "BG-LION6.png"%>);
}

【讨论】：