渲染部分圖像並將其傳遞給 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 和樣式標簽的陷阱。