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

Question

so on this project i was trying to make an image component to display an image from a string props. here is my component code

this is the component

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

this is my where the component display

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

am i doing anything wrong? because when i inspect the web element it shows this thing, so i was confuse where did i do wrong, is this the correct method?

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

Stevenson Lee · Accepted Answer · 2021-03-16 02:52:02Z

2

change this code <img :v-bind:src="recipeImage" alt="image-photo"> to <img v-bind:src="recipeImage" alt="image-photo">.

or you can change <img :v-bind:src="recipeImage" alt="image-photo"> to <img :src="recipeImage" alt="image-photo">.

: is shorthand of v-bind, your code :v-bind:src="recipeImage" means v-bind:v-bind:src="recipeImage"

answered Mar 16, 2021 at 2:52

Stevenson Lee

612 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related