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

Question

我是 vue.js 的初学者。我创建了一个 Vue 组件 "cards" ，其中包含一些 Vue 组件 "card" 。我在 :src="{ car​​d.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 的部分，它会对您有所帮助。