背景图像不会在 Ruby on Rails 应用程序上呈现答案

【问题标题】：Background images do not render on Ruby on Rails application背景图像不会在 Ruby on Rails 应用程序上呈现
【发布时间】：2012-07-24 02:25:37
【问题描述】：

我正在尝试在具有 head 类的 div 的背景中渲染图像。

我的applicationview写成Haml，body定义如下：

%body
    .container
        .head
            .sixteen_columns
            .top-nav

包含在我的application样式表中的是：

.head {
    background-image: url(/images/background_image.jpg); 
    width: 100%; 
    height: auto;
}

我尝试了多种变体来指定图像的路径并多次更改图像名称，但均无济于事。

有什么问题？

【问题讨论】：

你正在使用哪个版本的 Rails？
您是否在 Chrome 开发工具或 Firebug 中检查了您的 .head div 不需要 oveflow: none;？当您检查它时会很明显，因为它的高度为 0，但所有内容仍会显示。尝试将背景图像 url 设置为一些公共图像，例如 background-image: url("http://imgur.com/XMuKF.jpg");
嘿嘿！结果它以 0 的高度渲染。我发现这很奇怪，因为其中的一些嵌套 div（.sixteen_columns、.top-nav 和其他）正常渲染，全高。我添加了一个固定的高度来测试，宾果游戏，还有背景。

【解决方案1】：

在样式表中引用图像时，请考虑使用 asset_path 帮助器。文档可以在 here 找到（查看 2.2.1）在上下文中，您列出的 CSS 会提升

.head {
  background-image:url(<%= asset_path 'background_image.jpg'%>); 
  width:100%; 
  height:auto;
}

注意：这要求您的样式表是 erb。

与显式说明路径相比，这样做提供了许多优势，其中之一是随着新版本发布的 Rails 应用程序结构发生变化，您将不需要按顺序更改代码中的任何内容以便正确引用该图像。

这似乎只是为了引用一个图像有点过头了，但它是 Rails 的众多约定之一，很难使用但很棒！随着您的应用程序的增长和变化，希望它能够更好地经受时间的考验。

【讨论】：

【解决方案2】：

假设您使用的是 Rails 3.1 或更高版本，并且您正在为图像正确使用资产管道，您可以通过执行以下操作来包含图像文件：

.head {
    background-image: url(/assets/background_image.jpg); 
    width: 100%; 
    height: auto;
}

这是因为资产管道的工作方式。它在运行时编译您的资产，并将您的所有资产放在一个名为/assets/ 的文件夹中。它还忽略子文件夹结构，只是将所有内容转储到根目录 /assets/ 文件夹中，而不是 /assets/subfolder/。

【讨论】：

【解决方案3】：

尝试运行

rails -v

从控制台确认您使用的 Rails 版本。

听起来您正在运行 rails 2.x 应用程序，对吗？这应该意味着您正在从 /public 目录提供图像、js 等。让我在 css 中设置背景图像的一个重要问题是您指定的路径是相对于 stylesheet 所在的目录（例如 /public/stylesheets），而不是项目本身的根目录.

您是否尝试过更改路径以从样式表所在的目录上移一个目录？

.head {
    background-image: url(../images/background_image.jpg); 
    width: 100%; 
    height: auto;
}

编辑：您还尝试了哪些其他通往 bg 图像的路径？

其他一些可能性可能是：

  background-image: url(images/background_image.jpg); 
  background-image: url('../images/background_image.jpg');

要检查的另一件事是加载视图并使用检查器 (Ctrl Shift + I) 在 Google Chrome 中检查 div。选择 div 并检查 Chrome 分配给它的样式。

另外，请仔细检查它是否仍命名为 background_image.jpg

【讨论】：

是的，带有 /public 的 rails 2.x。这没有用。我复制并粘贴了它。 :( 不过谢谢。
真的很奇怪，我认为既然您没有使用资产管道，这应该与路径或文件名有关。
感谢您的帮助。不幸的是，这些都不起作用。我尝试了您列出的两种形式，以及图像的完整 URL。我现在还对图像的拼写进行了五次检查。此外，Chrome 显示正在分配背景样式。

【解决方案4】：

解决方案：

事实证明这是两件事的结合。我使用这种格式作为背景图片：

background-image: url(../images/background_image.jpg);

但是，.head div 正在使用 height 或 0 进行渲染。我添加了一个固定的高度来测试，一切都完美地显示出来了。我可以从这里开始工作。

非常感谢大家的帮助！！

【讨论】：

【解决方案5】：

在 Rails 4 中，您现在可以使用 css 和 sass 助手 image-url：

div.logo {background-image: image-url("logo.png");}

如果您的背景图片未显示，请考虑查看您如何在 css 文件中引用它们。

【讨论】：