javascript - 如何将图像 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 : ''
      }
    },

  });

标签： javascriptvue.jsdata-bindingvuejs2

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 文档中关于插值的部分，它会对您有所帮助。