问题描述
所以在这个项目中,我试图制作一个图像组件来显示来自字符串道具的图像。 这是我的组件代码
这是组件
<template>
<div class="Img-grid">
<div class="container">
<div class="col">
<img :v-bind:src="recipeImage" alt="image-photo">
<p>{{recipeName}}</p>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'ImgGrd'
props: {
recipeImage: String,recipeName: String
}
}
</script>
这是我的组件展示位置
<template>
<div class="RecipeByYou">
<div class="container">
<ImgGrid recipeName="a" v-bind:recipeImage="imgurl" />
</div>
</div>
</template>
<script>
import ImgGrid from '../components/Image_Grid.vue'
export default {
name: 'RecipeImage',components: {
Header,ImgGrid
},data () {
return {
imgurl: 'https://media.sproutsocial.com/uploads/2017/02/10x-featured-social-media-image-size.png'
}
}
}
我做错了什么吗?因为当我检查 web 元素时它显示了这个东西,所以我很困惑我哪里做错了,这是正确的方法吗?
<img data-v-366ed4fa="" v-bind:src="https://media.sproutsocial.com/uploads/2017/02/10x-featured-social-media-image-size.png" alt="image-photo">
解决方法
将此代码 <img :v-bind:src="recipeImage" alt="image-photo">
更改为 <img v-bind:src="recipeImage" alt="image-photo">
。
或者您可以将 <img :v-bind:src="recipeImage" alt="image-photo">
更改为 <img :src="recipeImage" alt="image-photo">
。
:
是 v-bind
的简写,您的代码 :v-bind:src="recipeImage"
表示 v-bind:v-bind:src="recipeImage"