javascript - 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 + ')'}"

这篇关于javascript - vue的style绑定不支持background-image吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！