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

Posted 2023-02-22

【中文标题】数据中的Vue.js相对路径[重复]

【英文标题】：Vue.js relative path in data [duplicate]

【发布时间】：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标签中，请检查***.com/q/40491506/6294072

【参考方案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')"/>

【讨论】：

非常感谢！