关于React使用require动态引入图片路径的问题

由于 webpack 的原因，require 只支 持纯静态 或 变量+静态 地址两种：
所以即便我们路径是对的，也会报错说找不到对应的模块文件。
比如：

let tmpUrl = ‘../../../images/hr/’；
require(tmpUrl);

只能写这种：

<img src={require('../../../images/hr/')} />

或者这种：

// 文件变量
var popWinPath = 'js/window';
/**
动态require
require(path) ,path 至少要有三部分组成
../../ =>  webpack 才知道从哪里开始查找
popWinPath  => 文件路径+名称
.js   => 文件后缀，必须要加上，不然会报错
*/
var Win = require('../../' + popWinPath + '.js')
console.log('Win', Win, popWinPath)

在项目中不可避免要动态加载图片或者把图片路径写的灵活一点，便于维护代码，，我们可以使用require.context()来实现。
require.context()接收三个参数：

1.路径
2.是否向下级目录查找
3.正则匹配

举个栗子栗子✨：

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

可能会遇到错误：
[ts] Property 'context' does not exist on type 'NodeRequire'.
报错说某个对象上 不存在某个属性 .
原因是因为ts的语法发生了变化：
如果写require.context()不好使，直接写require['context']()就ok了。