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

王晓波
  • 7

一个页面需要动态渲染这些图片
image.png
img直接使用这种方式
image.png
image.png
查询了一下,需要使用import导入图片
用这种导入是可以的
image.png
但是因为图片很多,需要循环渲染,所以上面这种方式不行,试了下使用require方式
直接写死是可以的
image.png
image.png
但是如果使用变量的话,好像require不支持里面传入的参数为变量,这个应该怎么处理呢
image.png
webpack配置如下
image.png

回复
阅读 733
3 个回答

当使用 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...

你能直接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进来

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏