在 Rails 5 模板中为内联背景图像 url 添加 image_tag答案

【问题标题】：Adding an image_tag for the inline background-image url in Rails 5 template在 Rails 5 模板中为内联背景图像 url 添加 image_tag
【发布时间】：2017-11-30 16:53:22
【问题描述】：

我需要使用样式标记内联设置背景图像，但它需要引用图像对象而不是资产文件夹中的固定图像。下面是我的代码，用于显示我正在尝试做的事情。

<div class="background-image-holder" style="background: url(#{" image_path @product.photo_one_url(:original)"}); opacity: 1;">
  <%= image_tag(@product.photo_one_url(:medium)) %>
</div>

【问题讨论】：

标签： ruby-on-rails ruby-on-rails-5 ruby-on-rails-5.1

【解决方案1】：

如果我包含这样的动态内容，我总是更喜欢使用content_tag，即

<%= content_tag :div, class: "background-image-holder", 
                      style: { background: "url('#{image_path(@product.photo_one_url(:original))}')", 
                               opacity: 1 } do %>
...
<% end >

我觉得它比使用内联 erb 标签读起来更好 - 个人喜好，但对你来说是另一种选择。

【讨论】：

这种方式看起来确实很干净，但是当我在控制台中查看图像源时，我得到了background: url("undefined"); opacity: 1;。我知道图像路径有效，因为我通过在页面中正常显示图像来测试它。
啊哈-我认为您需要将注入的路径用引号括起来，例如："url('#{image_path(@product.photo_one_url(:original))}')"。对不起，我的错 - 没有测试过这个。那，或者转义双引号\"，应该可以解决问题！（已更新答案以包含此内容。）