vue使用require动态加载本地图片

    我爱模板网在做一个政府项目时，遇到一个需求，就是系统首页的图片放在本地的assets目录里，但是具体显示哪个图片需要后台接口获取，一开始没有写成动态，直接用下面的代码没问题：

require("@/assets/imgs/cloud/Directory.svg")

    图片能正常显示，但是将这个路径改为变量就不行了：

let path = "@/assets/imgs/cloud/Directory.svg"
require(path)

    按道理没问题的，都是一样的写法，只不过一个直接使用这个路径，另一个将路径赋值给变量，再使用这个变量就不行了：

原因：
    webpack本身是一个预编译的打包工具，无法预测未知变量路径 不能require纯变量路径
    require(path) ,path 至少要有三部分组成, 目录+文件名+后缀
    目录 => webpack 才知道从哪里开始查找
    后缀 => 文件后缀，必须要加上，不然会报错
    文件名 => 可用变量表示

解决方法1、使用变量拼接，我爱模板网采用的这种方式，简单暴力！

value.svg = require('@/assets/' + item.svg )  // 不能完全使用变量，前置地址必须是静态地址，否则会报错

解决方法2、网上说是在webpack 中加入下面代码，重新启动就会好使，这个方案暂时没有试过，参考地址，下面为 webpack.config.js 的配置

// webpack.config.js
{
  module: {
    // require
    unknownContextRegExp: /$^/,
    unknownContextCritical: false,

    // require(expr)
    exprContextRegExp: /$^/,
    exprContextCritical: false,

    // require("prefix" + expr + "surfix")
    wrappedContextRegExp: /$^/,
    wrappedContextCritical: false
  }
}

解决方法3、使用require.context（require.context还可以实现项目工程化，在项目中自动引入文件以及配置svg应用广泛参考地址）

require.context(directory, useSubdirectories = false, regExp = /^\.\//)
// require.context 有三个参数
// directory：说明需要检索的目录
// useSubdirectories：是否检索子目录
// regExp: 匹配文件的正则表达式
const context = require.context('./assets', true, /\.png$/); // 根据路径正则读取文件
const imgName = './1.png';
const Img = context(imgName);