如何解决使用 props 在 vue js 上存储 src 时无法显示 img
所以在这个项目中,我试图制作一个图像组件来显示来自字符串道具的图像。 这是我的组件代码
这是组件
<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"
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。