vue js中使用props存储src时无法显示图片答案

【问题标题】：Cant Display img when using props to store src on vue jsvue js中使用props存储src时无法显示图片
【发布时间】：2021-06-13 07:46:11
【问题描述】：

所以在这个项目中，我试图制作一个图像组件来显示来自字符串道具的图像。这是我的组件代码

这是组件

<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">

【问题讨论】：

标签： vue.js vue-props

【解决方案1】：

将此代码<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"

【讨论】：