React 解决问题篇 ——关于 require 动态地址引用的问题

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

这篇帖子记录一下今天改了一下午的Bug以及解决办法(刚刚开始学习React 所以很多东西不太了解 所以需要一点一点的去学习积累 )

今天在做图片上传的时候 上传上去后有一个回显操作
用的是require 去引用从后台传来的图片地址 后台传过来后我先是用了一个变量去接受然后将这个变量放在了require中 但是就一直报错
Cannot find module '../../assets/images/xxx.jpg'
然后后来在网上看到了 require 中不能直接使用变量
require只支持纯静态和变量+静态的写法
原因就是 由于 webpack 的原因（具体是啥后面再补充）

---

有两种解决办法
第一种：
将前面的路径拿出来

// 纯静态
require(`../../assets/img/login.png`);
// 变量 + 静态 
let tmpUrl = 'img/login.png'；
require('../../assets/img' + 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");

同时 也可以在这个的基础上同时引入多张图片

const reqcon = require.context("./image",true,/^\.\/.*\.png$/);
const image = reqcon.keys().map(reqcon);

文章参考：https://www.jianshu.com/p/900cabf11b0e

感谢大佬的援助