关于vue项目中，使用require动态加载本地图片

1. vue中使用require(path)报错

let path = "@/assets/imgs/cloud/Directory.svg"
require("@/assets/imgs/cloud/Directory.svg") // 直接应用不会报错
require(path) // 使用变量报错，路径未找到

2. 原因：

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

3. 解决方法：

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

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

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

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

• 使用变量拼接

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

• 使用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);