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

0

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

answered May 1, 2021 at 16:55

Rodener Dajes

3674 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Vue.js relative path in data [duplicate]

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related