关于 require 动态地址引用的问题

小伙伴们肯定遇到过 文件引用 或 图片导入时由静态地址变为动态地址
即 require( '../assets/img/login.png') ==> require( 变量 + '文件名')

那么问题来了

即使我们变量的地址是对的，也会报错，举个例子

let tmpUrl = ‘../../assets/img/login.png’；
require(tmpUrl);

会报错说找不到对应的模块文件
原因就是 由于 webpack 的原因，require 只支 持纯静态 或 变量+静态 地址两种;

// 纯静态
require(`../../assets/img/login.png`);
// 变量 + 静态 
let tmpUrl = ‘img/login.png’；
require(‘@assets/’ + tmpUrl);

必须将 @/ 拿出来，否则就无法解析成正确的图片地址！

也可用 require.context() 来解决， require.context() 接收三个参数：
1.路径
2.是否向下级目录查找
3.正则匹配

举个例子

const context = require.context("../assets/image/", true, /\.(png|jpg)$/);
context("./ipad/img.jpg") ==> "../assets/image/ipad/img.jpg"
指定上下文环境后，路径上可用变量
let type = "ipad";
// "../assets/image/ipad/img.jpg"
context("./" + type + "/img.jpg");

希望能帮助到需要的小伙伴点赞点赞~~