How do I bind a :src for an image in the child component?

Question

I am attempting to render a list of components. All the data properties are displaying correctly except the img src url.

the files/folders are :

CryptConten

Answer 1

With webpack images are considered as modules so you should import or require them like :

 allcards : [ {id:0, name: 'Jim Zombie',graphic: require('./assets/jim.svg'), ....]

or

  import img from './assets/jim.svg';
  export default{
       ...
         data(){
             return {
               allcards : [ {id:0, name: 'Jim Zombie',graphic: img, ....],
                 ...
                }
             }
         ...

        }

Answer 2

Could you try use method for src

getImgUrl(path) {
    var images = require.context('../assets/', false, /\.png$/)
    return images('./' + path + ".png")
  }

<div class="col-lg-2" v-for="pic in pics">
   <img :src="getImgUrl(pic)" v-bind:alt="pic">
</div>

Answer 3

You can try this

<img v-attr="src:imgUrl">