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

我是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 : ''
      }
    },

  });

Vue.component（'cards'{
道具：[“卡片”]，
模板：`
`
});
Vue.组件（“卡”{
道具：[“卡片”，“索引”]，
模板：`
{{card.title}
{{card.body}
`
});
让imgs=“img/shoe\u img.jpg”；
让应用程序=新Vue({
el:“#应用程序”，
数据：{
卡片：[
{title:'Product 1'，body:“一些快速示例文本，用于构建卡片标题并构成卡片内容的大部分。”，imgSource:imgs}，
{title:'Product 2'，body:“一些快速示例文本，用于构建卡片标题并构成卡片内容的大部分。”，imgSource:imgs}，
{title:'Product 3'，body:“一些快速示例文本，用于构建卡片标题并构成卡片内容的大部分。”，imgSource:imgs}
],
警报：{
标题：“”，
消息：“”，
秀:假,，
类型：“”
}
},
});

将其更改为

：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文档中关于的部分，这将对您有所帮助。

删除括号

：src=“card.imgSource”

，数据也应该是工厂，即它是一个返回对象的函数，我认为这是重复的问题，您可以在这里找到答案：