img source in a component vue js-CodePudding

i am new to vue js and i have a problem with my img in the component

here is my code :

component

<template>
  <div >
    <div >
      <h2>{{title}}</h2>
      <h3>{{text}}</h3>
    </div>
    <div >
      <img src="{{src}}" alt="">
    </div>
  </div>
</template>

<script>
export default {
  name: `Features`,
  props: {
    title: String,
    text: String,
    src: String
  }
}

page:

<template>
    <div>
       <Features title="a title" text="a text" src="../assets/image.png">
    </div>
<template>

but no image is displaying

how can i make that ?

CodePudding user response：

As mentioned in the comments, make sure you change your binding inside the Features component to:

<img :src="src" alt="" />

If that doesn't help, try importing the image rather than having a relative path. This way, if your path is wrong you might get an error message.

import myImageSource from 'path/to/image.png'

CodePudding user response：

Append binding to the src attribute

<img :src="{{src}}" alt="">

Vue docs on v-bind