Rails 活动存储 - 背景图像无效属性？

Question

所以在我的应用程序中我有一张卡片，我想通过 ActiveStorage 动态设置背景图像，如下所示：

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

 </div>

但是，图像不可见。在 chrome 中，我也进入了 element.style 属性 "invalid type property" 作为错误。

如果我检查卡片元素，url 会像这样加载：

`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

在卡片 class 中添加 height/width 结果也没有区别。

这是我找到的参考资料，好像他们使用的方法和我一样：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 活动存储 - 背景图像无效属性？

Rails Active Storage - Background Image invalid property?

ruby-on-rails

rails-activestorage

Rails 活动存储 - 背景图像无效 属性？

Rails Active Storage - Background Image invalid property?

ruby-on-rails

rails-activestorage

Rails 活动存储 - 背景图像无效属性？