因此,在我的应用中,我有一张卡片,我想通过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,这甚至可能不是问题。
欢呼!