Vue.js relative path in data [duplicate]

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 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 — AVJT82
– AVJT82, Commented May 1, 2021 at 16:54

Rodener Dajes · Accepted Answer · 2021-05-01 16:55:05Z

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')"/>

1 Answer 1