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

Question

在索引页上：

<% @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 中作为背景，因为它们当然对于每个产品都是不同的。

Answer 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>

内联样式不是首选，如果我是你，我可能会尝试在视图中呈现图像的实际图像标签，并将其定位在 div 中 object-fit css 指令，将其他内容放在它上面。这将使您避免 CSP 和样式标签的陷阱。

How can I show an image from assets as a background image when rendering a partial and passing it an object