Vue.js 数据中的相对路径

Vue.js relative path in data

开始学习vueJs,第一次接触框架。 我遇到了问题,我不知道该怎么做。

 <img    
   :src="imgsource" 
 >


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

它不起作用。 你能解释一下为什么吗?

非常感谢

您需要导入路径,以便 vue 可以找到文件所在的位置。

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

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

内联

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