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

HTML 

<img :src="imgUrl">

一、public 文件夹

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

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

二、src/assets 文件夹

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

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

PS

想要了解更多请移步《Vue CLI 设置 publicPath：打包后的应用可部署在任意路径》