Vue 中加载图片 public 和 src/assets 文件夹下的区别（踩坑）【转】

HTML 

<img :src="imgUrl">

一、public 文件夹

• 路径设置时无需添加 public/，默认加载 public 文件夹下的图片。
• 不需要使用 require，否则就变成在 src/assets 文件夹寻找。
• 系统编译后，可替换图片；

1. this.imgUrl = 'images/test.jpg';

2. // 或

3. this.imgUrl = './images/test.jpg';

二、src/assets 文件夹

• 需要使用 require，运行时就加载；
• 系统编译后，不能替换，因为被内部编译管理；

1. this.imgUrl = require('../assets/images/test.jpg');

2. //或

3. this.imgUrl = require('./../assets/images/test.jpg');