vue中如何给backgroundImage中的url赋值?

<div class="img2" :style="{backgroundImage:'url(http://xx.com:8091//upload/17.jpg)'}"></div>


这里http://xx.com:8091//upload/17.jpg是常量,所以能正常显示

如果换成变量http_url='http://xx.com:8091//upload/17.jpg';

请问如何把http_url传进去?


ps:网上提供的解决办法:`<div class="img2" :style="{backgroundImage:'url('+http_url+')'}">
</div>`

貌似不行


。。。。。。。。。。。。。补充。。。。。。。。。。。。。。。。。。。。。。
我在data里已经返回了一个worklist,下面item就是worklist遍历的子项。
<div v-for="src of item.images" class="img2" :style="{backgroundImage:'url('+src+')'}"></div>
所以只能在页面渲染部分解决这个问题。
现在出现的问题是:`<div v-for="src of item.images">{{src}}</div>`打印出来的结果是好的,比如:`http://xx/uploads/2.jpg`。
但是`<div v-for="src of item.images" class="img2" :style="{backgroundImage:'url('+src+')'}"></div>`就会有问题,错误信息显示传给src参数是服务器上的绝对路径,例如:`D:/www/2.jpg`。

阅读 16.1k
3 个回答

正常字符串处理不行吗?
'url('+imageUrl+')',把imageUrl放到组件的data里。


不明白什么是“貌似不行”,是报错了还是单单无效?写了个测试demo JSfiddle测试

补充的内容没贴代码,也没具体报错信息,想象不出。

字符串模板,${}

不能把这个style对象直接扔进计算属性么,然后动态获取这个url拼接后返回,直接写在模版里面多麻烦,维护起来更麻烦

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题