react中循环渲染图片，require传参不支持变量

Question

一个页面需要动态渲染这些图片

img直接使用这种方式


查询了一下，需要使用import导入图片
用这种导入是可以的

但是因为图片很多，需要循环渲染，所以上面这种方式不行，试了下使用require方式
直接写死是可以的


但是如果使用变量的话，好像require不支持里面传入的参数为变量，这个应该怎么处理呢

webpack配置如下

Answer 1

当使用 require + 表达式时，webpack 在编译阶段并不清楚具体要导入哪个模块，但能分析出符合匹配的所有模块，并且把这些模块的信息整合为一个上下文模块（context module）返回。

也就是说，在调用 require("./images/" + name + ".png") 时返回一个叫上下文模块的东西，包含 images 下所有 png 格式的模块信息。

同时，这个上下文还自带有一些处理模块的方法，比如 keys() 返回一个数组，里面是模块的请求路径，["./images/a.png", "./images/b.png"] 这种，有了具体路径就能拿到具体模块了。

const contextModule = require('./images/' + name + '.png');
contextModule.keys().forEach(key => contextModule(key));  // 使用contextModule 去做 require

等同于

function importAll(r) {
  r.keys().forEach(r);
}
importAll(require('./images/' + name + '.png'));

上面的代码并没有记录下模块引用，没法利用，那么可以用一个载体存着

const cache = {};

function importAll(r) {
  r.keys().forEach((key) => (cache[key] = r(key)));
}

importAll(require('./images/' + name + '.png'));

这样代码里就能根据路径取到某个模块了。

你的代码里应该是用 item.icon 存了图片路径，

如果图片都在同一个目录下管理，那么 icon 可以是图片名称，require(图片目录路径) 并用 cache 存好图片引用，在循环里用 icon 去 cache 取就好了。

如果图片路径差别很大，那么可以用 require.context(正则) 替代 require(目录路径) 自定义一个上下文模块，还是 cache + 循环里 icon 取。这个正则就自由发挥了，能把需要的图片模块都覆盖到就行。

如果你是直接用了 require(item.icon) 那么大概项目中的所有模块都会匹配到，并且被打进包里，所以最好是最小范围的精确匹配。

webpack 文档里相关的内容：https://webpack.docschina.org...

Answer 2

你能直接require图片并不是js提供给你的能力（其实require也不是js提供的，es标准里只有import/export），而是使用webpack打包，webpack loader提供的，通常是url-loader/file-loader（也可以是其他打包工具）
像你这种需求，就需要使用webpack提供的require.context来实现（require表达式在webpack5文档里找了一圈找不到，webpack5里只说import()里可以写表达式，可能reqiure表达式webpack5不支持了）
https://webpack.js.org/api/mo...
（不过通常不建议，因为用了require.context就会自动打包这个目录下所有匹配的资源，不能按需打包，也会失去代码提示的能力）

---

我的话会直接在定义iconList的时候就把图片require进来

Answer 3

早上来试了一下，解决了，非常感谢大佬的帮助，在这里贴出来，供小白使用