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)`

获取网址并在其中添加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，那么这甚至可能不是问题。

干杯！

Rails Active Storage-背景图像无效属性？

1 个答案: