如何在 ruby on rails 中显示背景图像答案

【问题标题】：How to show a background image in ruby on rails如何在 ruby on rails 中显示背景图像
【发布时间】：2016-09-15 02:56:19
【问题描述】：

我正在运行 ruby 2.3.0 和 rail 5.0。当尝试在视图上显示背景图像时，我使用以下 CSS 类：

.header_img{
   width:100%;
   height: 400px;
   background: url("../../assets/images/home/home-header.jpg");
}

图像位于图像资产文件夹下的主子文件夹中。我试图在这里找到一个解决方案，但找不到一个有效的解决方案。任何帮助都会很棒。

我使用 Rubymine 作为我的 IDE，但似乎没有任何效果。

【问题讨论】：

guides.rubyonrails.org/v5.0/asset_pipeline.html 说你必须使用image-url('home/home-header.jpg')

【解决方案1】：

由于您的图像在评估中，因此无需提供绝对路径，因此您可以直接执行此类操作

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

【讨论】：

【解决方案2】：

你应该看看asset-pipe line，参见“2.3.1 CSS and ERB”：

资产管道会自动评估 ERB。这意味着如果您添加 CSS 资产的 erb 扩展（例如，application.css.erb），那么像asset_path这样的助手可以在你的CSS规则中使用：

.class { background-image: url(<%= asset_path 'image.png' %>) }

【讨论】：

【解决方案3】：

您可以使用 image_url 帮助程序，而无需将文件重命名为 .erb。您只需要添加扩展名 .scss。例如。 main.css.scss 并添加这样的行：

background-image: image_url('/home/image.png')

【讨论】：

background-image: image_url('other-folder/image.png') 如果您的图像位于 app/assets/images/other-folder/image.png 中。在 Rails 5 中工作。

【解决方案4】：

我的文件夹结构和你差不多，我已经成功使用了背景图片。

试试这个代码，看看它是否有效

background-image:url('/assets/home/home-header.jpg');

另外，如果你想要一个固定的、不重复的覆盖整个页面的背景图像，请在 ^that line 下方添加这个 css

background-size:cover; 
background-repeat:no-repeat;
background-attachment:fixed;
height:100%;

【讨论】：

【解决方案5】：

我正在使用这种方法。这是包含已编译资产的最佳方式。

.class {
background-image: asset-url('image.png');
}

【讨论】：

【解决方案6】：

我认为这就是他/她想要的：

<div class="main-banner" style="background-image: url(' <%= polymorphic_url(:image) %>');">

（或任何你调用的活动存储项。）

【讨论】：