背景图像不上呈现的Ruby on Rails应用程序(Background images do no

2019-10-17 02:11发布

我试图在与类div的背景图像渲染head

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

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

包括在我application 样式表

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

我已经尝试了许多变化的指定图像的路径和改变形象的名字多次,但无济于事。

问题是什么?

Answer 1:

请考虑使用asset_path在样式表中引用图像时的帮手。 文档可能会发现在这里 (看看2.2.1)在上下文中,您列出你会摇头的CSS

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

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

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

这似乎有点小题大做只是引用的图像,但它的Rails的许多公约,是很难习惯,但伟大的之一! 为您的应用程序的增长和变化,希望使其能够更好地经受了时间的考验。



Answer 2:

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

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

这样做的原因是因为资产流水线的工作方式。 它编译你的资产在运行时,它会将您的所有资产的文件夹,名为在/assets/ 。 它还忽略子文件夹结构,它只是一切转储到根/assets/文件夹,而不是/assets/subfolder/



Answer 3:

尝试运行

rails -v

从控制台,以确认你是什么版本的Rails上。

这听起来像你正在运行的轨道2.x的应用程序,是否正确? 这应该意味着你从/ public目录提供图片,JS等。 绊了我在CSS中设置背景图片的一个重要的小问题,就是您指定的路径是相对于目录中的样式表中(例如,/公共/样式表),而不是项目本身的根目录。

你试图改变上去从那里样式表位于一个目录的路径?

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

编辑:你尝试过什么其他路径的背景图片?

一些其他的可能性可以是:

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

检查的另一件事是先装载视图,并使用检查器(Ctrl键Shift + I)研究谷歌浏览器股利。 选择div并检查风格Chrome浏览器分配给它。

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



Answer 4:

解:

它原来是两件事情的组合。 我用这个格式的背景图像:

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

然而, .head div用renbdering height0 。 我添加了一个固定的高度测试,而这一切完美地出现了。 我可以用这个从这里工作。

谢谢大家这么多的帮助!



Answer 5:

In rails 4 you can now use a css and sass helper image-url:

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

If your background images aren't showing up consider looking at how you're referencing them in your css files.



文章来源: Background images do not render on Ruby on Rails application