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



因此,在我的应用中,我有一张卡片,我想通过Activestorage动态设置背景图像:

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

但是,图像不可见。在Chrome内部,我还会进入元素。风格属性"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完全没有区别。唯一的更改是Localhost:rails_blob_url中的URL中添加了3000个:

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

在卡类结果中添加高度/宽度也没有差异。

这是我发现的参考文献,似乎他们正在使用与我相同的方法:Ruby on Rails 5.2-带有主动存储的背景图像

问题可能在哪里?

事先感谢大家!

问候!

感谢大家的所有输入!

我能够修复它。以防万一有人遇到同一问题:

在您的路径中添加单引号:

解决方案:

 <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,这甚至可能不是问题。

欢呼!

最新更新