[英]How to bind an image src attribute to a dynamic value
I'm a beginner in vue.js.我是 vue.js 的初学者。 I've create a Vue component "cards" that has some Vue componet "card".
我创建了一个 Vue 组件“卡片”,其中包含一些 Vue 组件“卡片”。 I have an error in :src="{ card.imgSource }" .
我在:src="{ card.imgSource }"中有一个错误。 I don't know what should I do to solve it.
我不知道我该怎么做才能解决它。 Please help me.
请帮我。
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 : ''
}
},
});
Change it for :src="card.imageSource"
.将其更改为
:src="card.imageSource"
。
With the :src="{ card.imageSource }"
you basically try to pass an object literal with a malformed object property.使用
:src="{ card.imageSource }"
您基本上尝试传递带有格式错误的 object 属性的 object 文字。
Assuming your imageSource
is 'http://example.com/img.jpg'
you are effectively passing as a src
the object { 'http://example.com/img.jpg' }
which is not a valid object (nor a valid image URL) .假设您的
imageSource
是'http://example.com/img.jpg'
,您实际上将 object { 'http://example.com/img.jpg' }
作为src
传递,这不是有效的 object (也不是有效的图像 URL) 。
To understand what I mean when I say you are passing an object literal, try doing that: :src="{ key: card.imageSource }"
and inspect the DOM.要理解我说您传递 object 文字时的意思,请尝试这样做:
:src="{ key: card.imageSource }"
并检查 DOM。 Your error will disappear, and you will most likely see src="[object Object]"
.您的错误将消失,您很可能会看到
src="[object Object]"
。
If it's still a bit hard to understand, try reading the section on interpolations in the Vue.js documentation, it will help you.如果仍然有点难以理解,请尝试阅读 Vue.js 文档中的插值部分,它会对您有所帮助。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.