如何将图像 src 属性绑定到动态值

Question

我是 vue.js 的初学者。我创建了一个 Vue 组件“卡片”，其中包含一些 Vue 组件“卡片”。我在 :src="{ card.imgSource }" 中出错。我不知道我应该怎么做才能解决它。请帮助我。

Vue.component('cards' , {
    props: ['cards'],
    template : `
    <div class="row products">
            <card v-for="(card , index) in cards" :card="card" :index="index"></card>
    </div>
    `
  });


  Vue.component('card' , {
    props :['card' , 'index'],
    template : `
        <div class="col-md-4 product">
        <div class="card">
            <img :src="{ card.imgSource }" class="card-img-top" alt="...">
            <div class="card-body">
                <h5 class="card-title">{{ card.title }}</h5>
                <p class="card-text">{{ card.body }}</p>
                <a href="#" class="btn btn-primary">Go somewhere</a>
            </div>
        </div>
            
        </div>
    `
  });


  let imgs = "img/shoe_img.jpg";

  let app = new Vue({
    el : '#app',
    data : {
      cards : [
        { title : 'Product 1' , body : "Some quick example text to build on the card title and make up the bulk of the card's content." ,imgSource : imgs },
        { title : 'Product 2' , body : "Some quick example text to build on the card title and make up the bulk of the card's content." ,imgSource: imgs},
        { title : 'Product 3' , body : "Some quick example text to build on the card title and make up the bulk of the card's content." ,imgSource: imgs}
      ],
      alert : {
        title : '',
        message : '',
        show : false ,
        type : ''
      }
    },

  });

Answer 1

将其更改为 :src="card.imageSource"。

使用 :src="{ card.imageSource }" 你基本上会尝试传递一个带有畸形对象的对象字面量属性.

假设您的 imageSource 是 'http://example.com/img.jpg' 您实际上是作为 src 对象 { 'http://example.com/img.jpg' } 传递的，它不是有效对象 （也不是有效图片 URL).

要理解我所说的传递对象文字的意思，请尝试这样做：:src="{ key: card.imageSource }" 并检查 DOM。您的错误将消失，您很可能会看到 src="[object Object]".

如果仍然有点难以理解，请尝试阅读 Vue.js 文档中有关 interpolations 的部分，它会对您有所帮助。

如何将图像 src 属性绑定到动态值

How to bind an image src attribute to a dynamic value

javascript

data-binding

vue.js

vuejs2