Vue.js 使用道具在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>

{{recipeName}}

导出默认值{
名称：“ImgGrd”
道具：{
recipeImage:字符串，
recipeName:字符串
}
}

这是显示组件的位置

<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'
    }
  }
}

---

将此代码

更改为

或者您可以将

更改为

：

是v-bind的缩写，您的代码

：v-bind:src=“recipeImage”

的意思是

v-bind:v-bind:src=“recipeImage”

<img data-v-366ed4fa="" v-bind:src="https://media.sproutsocial.com/uploads/2017/02/10x-featured-social-media-image-size.png" alt="image-photo">