问题：最近做的一个抽签h5页面中遇到的问题，有时候需要拼接图片路径，但是webpack打包后，图片的名字是随机码，不能直接拼接使用。这个时候就需要require来加载图片。

名字会变更，这样拼接路径就找不到图片，用require后，图片就会被视为webpack加载后的webpack模块（会被webpack处理）。而require之后的图片路径会自动生成成打包后的图片路径。

其他参考资料：

require是commonjs模块的概念，require能加载.js,.json,.node的扩展名，具体你可以了解下node的模块机制。然后vue为什么能引入图片，是因为vue使用了webpack，webpack会将识别require或者import将其转换成自己的webpack模块，比如require转换成__webpack_require__。但是webpack只能识别JS，所以webpack有个重要的概念Loader，通过file-loader或者url-loader就能识别非js的图片文件。其实打包的时候都使用到Nodejs的功能，webpack的loader内部原理也是。我不知道你图片用来干嘛，但是Nodejs中图片应该用fs文件模块去处理。

我的问题demo

  //随机出现好运签
function random() {
var listArray = [
require("../img/shark/shark1.png"),
require("../img/shark/shark2.png"),
require("../img/shark/shark3.png"),
require("../img/shark/shark4.png"),
require("../img/shark/shark5.png"),
require("../img/shark/shark6.png"),
require("../img/shark/shark7.png"),
require("../img/shark/shark8.png"),
require("../img/shark/shark9.png"),
]
var index = Math.floor(Math.random() * listArray.length)
$(".third-share>img").attr("src", listArray[index]);
}