css - 如何使用事件存储动态更改背景图像 css 属性

Question

我该如何使用:

<%=image_tag(url_for(object.image)%>

将图片url放在每个对象上

<div class='bg' style="background:url('img.jpg')"></div>

我使用 Rails 主动存储。我试过这个:

<div "style="background: url(<%=image_tag(@object.image)%>">

但是图像没有被渲染。这是 HTML 输出:

<div style="background: url(<img src=" http:="" localhost:3000="" rails="" active_storage="" blobs="" eyjfcmfpbhmionsibwvzc2fnzsi6ikjbahbhdz09iiwizxhwijpudwxslcjwdxiioijibg9ix2lkin19--45640b74829f35f71ed0d53b6c237f5257810f29="" beer_lager_bg.jpg"="">

Answer 1

对于您的具体情况，您只需要输入:

<div class='bg' style="background: url(<%= url_for(object.image) %>) no-repeat;"></div>

记住:CSS 不是 HTML，image_helper 会创建一个 <img>标签，对于 CSS ( style="..." ) 不需要它!

但是正确的做法是:

*.css - *.scss
.bg {
  /* The image used */                 /*accepts a full URL*/ 
  background-image: asset_path(url_for(object.image));}

更多内容在这里:https://api.rubyonrails.org/classes/ActionView/Helpers/AssetUrlHelper.html#method-i-asset_path