vue.js - 如何使用 vue bind 设置背景图片 url

Question

我有一个基于项目数组使用的 vue 组件。该数组包含组件中所需的所有相关信息。问题在于设置背景图像 url。我只是设法通过给它整个 css 语法而不只是一个图像 url 来让它工作。我怎样才能让它只与图像 url 一起工作？

<div id="app">
  <book
  v-for="item in items"
  v-bind:item="item"
    ></book>
</div>
<script src="https://unpkg.com/vue"></script>
<script>
Vue.component('book', {
  props: ['item'],
  template: '<div class="book" :class=" item.itemClass "><a :href="item.link" class="card"><div class="thumb" :style="item.url"></div><article><h1>{{  item.titlu }}</h1><span>{{ item.autor }}</span></article></a></div>'
})
var vueApp = new Vue({
    el: '#app',
    data: {
        items: [
            {
                itemClass: 'item-1',
                titlu: 'Title 1',
                autor: 'Author 1',
                link: 'www.google.com',
                url: 'background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/flex-1.jpg);',
            },
            {
                itemClass: 'item-2',
                titlu: 'Title 2',
                autor: 'Author 2',
                link: 'www.google.com',
                url: 'background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/flex-1.jpg)',
            },
            {
                itemClass: 'item-2',
                titlu: 'Title 3',
                autor: 'Author 3',
                link: 'www.google.com',
                url: 'background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/flex-1.jpg);',
            },                      
        ]
    },
})
</script>

Answer 1

Inline styles binding需要一个对象或对象数组，而您传递的是一个字符串。

它的形式应该是:

:style="{ backgroundImage: 'url(...)' }"