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

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)才能正确呈现，指向已编译的资产。

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

尝试：

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

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