vue 前端 require动态引入图片报错Error: Cannot find ‘@/static/image/xxx.png‘

在Vue中，Image组件的source如果使用require方式引入图片资源，则必须使用静态的字符串，不能使用变量，因为require是编译时执行的，而非运行时执行！

下面来说说ES6的require

关于es6的require添加动态变化的路径

直接静态写死是不会有错误的：

let imgUrl = require('../images/a.png');

但是如果你尝试着：

var imgUrl = "../images/b.jpg";

let img = require(imgUrl);

或者这样动态变化：

require(`../../assets/images/${showAllExpended?'unfold':'up'}.png`

那就只能报错了（因为require它是打包工具所需要的标识，你搞成运行时通过变量去定义的话，它就没办法打包了啊）

解决方法：​

而require里的正确的格式必须是path

可以这么写

var imgUrl = "a";

let img = require('../images/'+imgUrl+'.jpg');

当然最好这么写：imgUrl 为图片名称即可，相对路径与绝对路径不能加。

var imgUrl = "b.jpeg";

let img = require('../images/'+imgUrl);