ruby-on-rails - 渲染局部图像并将其传递给对象时，如何将 Assets 中的图像显示为背景图像

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

在 View 中，您需要调用 asset_url(product) 以使 URL 正确呈现，指向已编译的 Assets 。

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

尝试:

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

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