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

Question

新问题：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' }
    ]
  }
})

Answer 1

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

新回答：

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

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

Answer 2

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

Answer 3

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

Answer 4

拼接错了吧 v-bind:style="{backgroundImage:'url('+todo.pic+')'}"