Pro*_*eus 3 ruby-on-rails rails-activestorage
所以在我的应用程序中,我有一张卡片,我想通过 ActiveStorage 动态设置背景图像,如下所示:
<div class="card" style="background-image: url(<%= rails_blob_path(post.images.first) %>)">
</div>
Run Code Online (Sandbox Code Playgroud)
但是,图像不可见。在 chrome 中,我也将 element.style 属性"invalid type property"作为错误输入。
如果我检查卡片元素,网址会像这样加载:
`background-image: url(/rails/active_storage/blobs/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBCdz09IiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--9be6ec89650623cc4a22214c34635f2924f8feea/Frame%20(1).png)`
Run Code Online (Sandbox Code Playgroud)
获取 url 并向其添加 localhost:3000 加载图像:
localhost:3000/rails/active_storage/blobs/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBCdz09IiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--9be6ec89650623cc4a22214c34635f2924f8feea/Frame%20(1).png
Run Code Online (Sandbox Code Playgroud)
在 img 标签内正常渲染图像工作正常:
<%= image_tag(post.images.first) %>
Run Code Online (Sandbox Code Playgroud)
此外,更改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
Run Code Online (Sandbox Code Playgroud)
向卡片类添加高度/宽度也没有区别。
这是我找到的参考资料,似乎他们使用的方法与我相同:Ruby on rails 5.2 - background image with active storage
问题可能出在哪里的任何想法?
提前谢谢大家!
你好!
感谢大家的所有投入!
我能够修复它。以防万一有人遇到同样的问题:
将单引号添加到您的路径中:
解决方案:
<div class="card" style="background-image: url('<%= rails_blob_url(post.images.first) %>'); height: 100px; background-position: center;">
Run Code Online (Sandbox Code Playgroud)
比较(之前):
<div class="card" style="background-image: url(<%= rails_blob_path(post.images.first) %>)">
Run Code Online (Sandbox Code Playgroud)
双引号在这个例子中不起作用。
如果我只是使用 scss 文件而不是将其直接添加到 div,这可能甚至不是问题。
干杯!
| 归档时间: |
|
| 查看次数: |
771 次 |
| 最近记录: |