[英]How to bind an image src attribute to a dynamic value
我是 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 : ''
}
},
});
将其更改为:src="card.imageSource"
。
使用:src="{ card.imageSource }"
您基本上尝试传递带有格式错误的 object 属性的 object 文字。
假设您的imageSource
是'http://example.com/img.jpg'
,您实际上将 object { 'http://example.com/img.jpg' }
作为src
传递,这不是有效的 object (也不是有效的图像 URL) 。
要理解我说您传递 object 文字时的意思,请尝试这样做: :src="{ key: card.imageSource }"
并检查 DOM。 您的错误将消失,您很可能会看到src="[object Object]"
。
如果仍然有点难以理解,请尝试阅读 Vue.js 文档中的插值部分,它会对您有所帮助。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.