背景图像不会渲染Ruby on Rails应用程序

我试图在类的背景中使用类head来渲染图像。背景图像不会渲染Ruby on Rails应用程序

我application视图写入Haml的和身体的定义如下：

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

包括在我application样式是：

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

我已经尝试了许多变化指定图像的路径并多次更改图像名称，但无济于事。

问题是什么？

来源

2012-07-24 Matt Hollingsworth

你正在使用什么版本的Rails？ – 2012-07-24 02:28:58

您是否检查过Chrome Dev Tools或Firebug，您的'.head' div不需要'oveflow：none;'？当你检查它时会显而易见，因为它将具有0的高度，但所有内容仍将显示出来。尝试将background-image url设置为一些公共图像，如'background-image：url（“http://imgur.com/XMuKF.jpg”）;''图片的猫顺便说一句。如果图像仍然不显示，您将会知道这实际上是一个样式问题。 – Strelok 2012-07-24 04:36:02

嘿嘿！原来它渲染的高度为0.我发现这很奇怪，因为它内部的一些嵌套div（.sixteen_columns，.top-nav和其他）正常渲染，处于全高。我添加了一个固定的高度来测试，宾果游戏，这里有背景。 – 2012-07-24 14:29:47

假设你正在使用Rails 3.1或超越，系统能正常使用的管道资产为您的图片，您可以通过包括图像文件如下：

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

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

来源

2012-07-24 02:44:13

谢谢，但它是Ruby 2.3.x.不是100％确切的版本。 – 2012-07-24 03:28:20

考虑在样式表中引用图像时使用asset_path助手。文档可能会发现here（看看2.2.1）在上下文中，您列出的CSS，你会摇头

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

注：这需要你的样式表是ERB。

了明确说明的路径这样做提供了许多优点，其中之一是，随着新版本发布的Rails应用程序的结构发生变化，你会不需要改变你的代码什么，以便该图像正确引用。

这看起来像是矫枉过正只是引用一个图像，但它是Rails的许多惯例之一，很难得到使用，但很棒！随着应用的增长和变化，希望能够更好地忍受时间的考验。

来源

2012-07-24 03:17:24 rudolph9

否定的。无法得到这个工作枯萎。尽管如此，感谢您提供有关资产的提示。肯定会考虑到这一点。 – 2012-07-24 03:35:40

我看到你正在使用的另一个评论* Rails 2.3.x *，我不相信我的答案适用于'rails <3.1' – rudolph9 2012-07-24 03:37:18

尝试从控制台运行

rails -v

，以确认你是什么版本的Rails上。

听起来你正在运行rails 2.x应用程序，对吗？这应该意味着你正在从/ public目录中提供图片，js等。一个让我在css中设置背景图像的重要问题是，你指定的路径是相对于样式表所在的目录（例如/ 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）研究谷歌浏览器股利。选择div并检查Chrome分配给它的样式。

此外，仔细检查，它仍然是一个名为background_image.jpg不能告诉你多少次，我已经得到了一些错字我忽略了焚烧）

来源

2012-07-24 03:43:06 ply

是的，rails 2.x，与/ public。这没有奏效。我复制并粘贴它。 :(谢谢虽然 – 2012-07-24 03:55:08

真的很奇怪，我想因为你没有使用资产管道，这应该与路径或文件名有关 – ply 2012-07-24 04:20:41

感谢您的帮助，不幸的是，没有一个工作。表格，以及图片的完整网址，现在我也对图片进行了拼写检查，同时Chrome也显示背景样式正在分配。 – 2012-07-24 13:46:50

解决方案：

原来是两件事的结合。我用这个格式的背景图像：

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

然而，.head div用的0一个height renbdering。我添加了一个固定的高度进行测试，并且这一切都显示完美。我可以从这里工作。

非常感谢大家的帮助！

来源

2012-07-24 14:32:12

在轨道4，你现在可以使用CSS和青菜辅助图像网址：

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

如果你的背景图片没有显示出来考虑看你是如何在你的CSS文件中引用它们。

来源

2013-08-01 20:28:06 lflores

背景图像不会渲染Ruby on Rails应用程序

回答

相关问题