数据中的Vue.js相对路径[重复]答案

【问题标题】：Vue.js relative path in data [duplicate]数据中的Vue.js相对路径[重复]
【发布时间】：2021-07-24 16:01:02
【问题描述】：

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

 <img    
   :src="imgsource" 
 >


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

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

非常感谢

【问题讨论】：

如果你要使用变量imgsource而不是直接将路径放在img标签中，请检查stackoverflow.com/q/40491506/6294072

标签： vue.js vue-component

【解决方案1】：

你需要导入路径，以便 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')"/>

【讨论】：

非常感谢！