Rails Active Storage - 背景圖像無效屬性？

Question

所以在我的應用程序中，我有一張卡片，我想通過 ActiveStorage 動態設置背景圖像，如下所示：

  <div class="card" style="background-image: url(<%= rails_blob_path(post.images.first) %>)">

 </div>

但是，圖像不可見。 在 chrome 中，我也將 element.style 屬性"invalid type property"作為錯誤輸入。

如果我檢查卡片元素，網址會像這樣加載：

`background-image: url(/rails/active_storage/blobs/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBCdz09IiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--9be6ec89650623cc4a22214c34635f2924f8feea/Frame%20(1).png)`

獲取 url 並向其添加 localhost:3000 加載圖像：

localhost:3000/rails/active_storage/blobs/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBCdz09IiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--9be6ec89650623cc4a22214c34635f2924f8feea/Frame%20(1).png

在 img 標簽內正常渲染圖像工作正常：

<%= image_tag(post.images.first) %>

此外，將rails_blob_path更改為rails_blob_url沒有任何區別。 唯一的變化是在 rails_blob_url 的 url 中添加了一個 localhost:3000：

http://localhost:3000/rails/active_storage/blobs/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBCdz09IiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--9be6ec89650623cc4a22214c34635f2924f8feea/Frame%20(1).png

向卡片類添加高度/寬度也沒有區別。

這是我找到的參考資料，似乎他們使用的方法與我相同： Ruby on rails 5.2 - background image with active storage

問題可能出在哪里的任何想法？

提前謝謝大家！

你好！

Answer 1

感謝大家的所有投入！

我能夠修復它。 以防萬一有人遇到同樣的問題：

將單引號添加到您的路徑中：

解決方案：

 <div class="card" style="background-image: url('<%= rails_blob_url(post.images.first) %>'); height: 100px; background-position: center;">

比較（之前）：

 <div class="card" style="background-image: url(<%= rails_blob_path(post.images.first) %>)">

雙引號在這個例子中不起作用。

如果我只是使用 scss 文件而不是將它直接添加到 div，這可能甚至不是問題。

干杯!