【随手记】require编译问题-- vue项目动态生成的img地址信息，webpack无法打包问题

问题

vue项目动态生成的img地址信息，webpack无法打包问题

// 这样动态引入的地址，地址无效，因为没有被打包
<img  :src=" imgSrc ">

原因

Webpack资源打包时的特点
webpack不会对动态生成的资源地址打包。

解决

手工require引用动态资源

<img  :src=" require( imgSrc ) ">

不过这样有个新问题

新问题

关于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里面拼接字符串就好了

var imgUrl = "b.jpeg";

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