Vue.js relative path in data

Question

I started to learn vueJs and it's my first time with framework. I got a problem and i don't know how to do.

 <img    
   :src="imgsource" 
 >


export default {
  name: "social-media",
  data() {
      return {
          imgsource: "../assets/img/icon-facebook.svg"
      }
  },
};

It's does not working. Can you explain me why ?

Thank you so much

Please check https://stackoverflow.com/q/40491506/6294072 if you are going to use a variable `imgsource` instead of just putting the path directly in the img tag — AT82, May 01 '21 at 16:54

score 0 · Accepted Answer · answered May 01 '21 at 16:55

You need to import the path so that vue can figured it out where the file.

import image from "../assets/img/icon-facebook.svg"
export default {
 name: "social-media",
  data() {
    return {
       imgsource: image
    }
  },
};

or

require('../assets/img/icon-facebook.svg');

inline

 <img :src="require('../assets/img/icon-facebook.svg')"/>

Vue.js relative path in data

1 Answers1