使用道具在 vue js 中存储 src 时无法显示图像

Question

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

这是组件

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

Answer 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 的 shorthand，您的代码 :v-bind:src="recipeImage" 表示 v-bind:v-bind:src="recipeImage"

使用道具在 vue js 中存储 src 时无法显示图像

Cant Display img when using props to store src on vue js

vue.js

vue-props