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

【问题标题】：Rails Active Storage - Background Image invalid property?Rails Active Storage - 背景图像无效属性？
【发布时间】：2019-07-13 03:20:21
【问题描述】：

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

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

 </div>

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

如果我检查 card 元素，会像这样加载 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

向卡片类添加高度/宽度也没有区别。

这是我找到的参考资料，似乎他们正在使用与我相同的方法：Ruby on rails 5.2 - background image with active storage

任何想法可能是问题所在？

提前谢谢大家！

您好！

【问题讨论】：

试试去掉正斜杠，看看stackoverflow.com/questions/22075730/…
您是想让图片可下载还是只显示？
无需下载。图片需要设置为 div 背景，如上图所示。通过 image_tag 渲染图像并获取下载 url 也可以。我猜这与 CSS 相关，以及我注入背景图像 url 的方式。

标签： ruby-on-rails rails-activestorage

【解决方案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 中，这可能甚至都不是问题。

干杯！

【讨论】：