渲染部分并将其传递给对象时，如何将资产中的图像显示为背景图像答案

【问题标题】：How can I show an image from assets as a background image when rendering a partial and passing it an object渲染部分并将其传递给对象时，如何将资产中的图像显示为背景图像
【发布时间】：2021-03-25 12:31:24
【问题描述】：

在索引页面上：

<% @products.each do |prod| %>
  <%= render 'shared/product_card', product: prod %>
<% end %>

在我的产品卡片部分：

<div class="product-card-image" style='background-image: url("<%= product.name %>.jpeg")'></div>

我不能将图像硬编码到 CSS 中作为背景，因为它们对于每个产品当然是不同的。

【问题讨论】：

标签： ruby-on-rails ruby ruby-on-rails-6

【解决方案1】：

在视图中，您需要调用asset_url(product) 以正确呈现指向已编译资产的 URL。

请在此处查看这些文档以了解如何以不同方式呈现资产：https://guides.rubyonrails.org/asset_pipeline.html#css-and-sass

试试：

<div class="product-card-image" style='background-image: url(<%= asset_path('product.png') %>)'></div>

内联样式不是首选，如果我是你，我可能会尝试在视图中渲染图像的实际图像标签，并使用object-fit css 指令将其放置在 div 中，并在其顶部放置其他内容。这将使您避免 CSP 和样式标签的陷阱。

【讨论】：

啊，你是对的，我忘记了那部分。谢谢@3limin4t0r
我不想吹毛求疵，而是使用asset_path("#{product.name}.jpeg")更好地匹配问题示例。
非常感谢 - 是的，我选择了：<div class="product-card-image" style='background-image: url(<%= asset_path("#{product.name.split.join}.jpeg") %>)'></div> 因为我在产品名称中也有需要删除的空格