H5W3
当前位置:H5W3 > 其他技术问题 > 正文

vue的style绑定不支持background-image吗?

新问题:v-bind:style=”backgroundImage:’url(todo.pic)'” 如果图片用的是json里的数据,会得到一个错误:

dev.js:4 [Vue warn]: Error when evaluating expression
“backgroundImage:’url(todo.pic)’>

html:

<div id="app">
    <div v-for="todo in todos" v-bind:style="{backgroundImage:'url(todo.pic)'}">
      {{ todo.text }}
    </div>
</div>

js:

new Vue({
  el: '#app',
  data: {
    todos: [
      { text: 'Learn JavaScript',pic:'a.png' },
      { text: 'Learn Vue.js', pic:'b.png' },
      { text: 'Build Something Awesome', pic:'c.png' }
    ]
  }
})

回答:

我这边是正常的,你看看有没有设置div的宽高

新回答:

data () {
    return {
        img: require('你的json资源路径')
    }
}

:style="{backgroundImage: 'url(' + img + ')'}"

回答:

1年后再看自己当初提的问题,果然too naive
关于字符串拼接感觉这个写法更好些 :style="{backgroundImage:`url(${img})`}"
参考 https://eslint.org/docs/rules…

回答:

你直接这样写url,他就会把url当成个方法解析,而不是字符串,:style=”{backgroundImage: ‘url(‘ + img + ‘)’}” 按照上面这个人的这样写,就可以的

本文地址:H5W3 » vue的style绑定不支持background-image吗?

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址