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, ....],
                 ...
                }
             }
         ...

        }