在 Rails 中使用资产管道的内联样式答案

【问题标题】：Inline style using asset pipeline in rails在 Rails 中使用资产管道的内联样式
【发布时间】：2017-11-16 03:30:59
【问题描述】：

<%= link_to root_path do %>
    <div class="">
        <div style="background-image:<%= image_tag " image1.png "%>">
    </div>

    <div>
      <h2>Title</h2>
      <p>Paragraph</p>
    </div>
  </div>
<% end %>

我想从资产管道中提取图像作为我的背景。我可以在 .sass 文件中做到这一点。但是我为每一张都做了一个模板，我觉得把每张照片都输入进去会更容易。

<div style="background-image:<%= image_tag "image1.png"%>"> 这是我确定语法的那一行。

【问题讨论】：

标签： css ruby-on-rails-5 asset-pipeline

【解决方案1】：

替换image_path，它会给你一个img标签，为你提供image1文件的路径，试试image_path：

<div style="background-image: <%= image_path 'image1' %>"></div>

【讨论】：

使用image_path 代替image_tag 很好。图像根本没有。我正在使用 rails5 不确定它是否有所作为。

【解决方案2】：

如果您决定使用非内联样式，那么您也可以在 .scss 中使用 image-path。

在 html.erb

<div class="custom-background"></div>

在.scss

.custom-background {
 background-image: image-path('image1.png');
}

【讨论】：

【解决方案3】：

如果您使用ERB 由资产管道解释，则asset_path 'image.png' 将返回位于资产加载路径之一中的图像的完整路径，然后您可以在url() 中使用该路径。所以你的内联 div 可能看起来像：

<div style="background-image: url(<%= asset_path 'image1.png' %>)">

参考：CSS and ERB（注意asset_path 助手中的underscore (_)）

如果您使用Sass，以下助手将帮助您使其更简洁：

image-url("rails.png") 返回url(/assets/rails.png)
image-path("rails.png") 返回"/assets/rails.png"

也可以使用更通用的形式：

asset-url("rails.png") 返回url(/assets/rails.png)
asset-path("rails.png") 返回"/assets/rails.png"

参考：CSS and Sass（请注意上述助手中的 dash (-)）

【讨论】：