Vue 中加载图片 public 和 src/assets 文件夹下的区别

遇坑:今天在组件中加载放在public文件夹下的图片时,加载不出来

错误示例:

<img src="public/img/meals/1.png" alt=""/>
1

经过我查阅资料尝试后发现:

# 一、public 文件夹

  • 路径设置时无需添加 public/,默认加载 public 文件夹下的图片。
  • 打包构建后,直接加载
  • 系统编译后,可替换图片;
<img src="img/meals/1.png" alt=""/> 
1

# 二、src/assets 文件夹

  • 系统编译后,不能替换,因为被内部编译管理
  • 打包构建后,会被编译成js文件系统编译后,不能替换,因为被内部编译管理
<img src="../assets/images/test.jpg" alt=""/>  
1