Create React App中React动态导入文件夹大量图片报错如何解决

• Webpack静态分析限制：Create React App底层基于Webpack构建，动态import()语句需要Webpack在打包阶段静态识别可能的导入路径。你使用的完全动态拼接路径import(../images/${url})没有给Webpack足够的路径特征提示，导致Webpack无法正确匹配到目标图片模块，抛出找不到模块的错误。
• 代码逻辑遗漏：你调用Promise.all时没有加await关键字，直接将pending状态的Promise对象传入setData，就算导入逻辑正常，你也拿不到正确的图片路径数据。
• 动态导入返回值处理遗漏：import()返回的是ES模块对象，真实的图片路径存储在模块的default属性中，你没有做这层转换，就算导入成功也无法直接使用返回结果。

方案1：使用require.context批量导入（最推荐） #

不需要手动罗列所有图片文件名，直接批量匹配指定目录下的所有图片，代码如下：

// 导入src/images目录下所有.png后缀的文件
const importAll = (requireContext) => requireContext.keys().map(requireContext);
const imageList = importAll(require.context('../images', false, /\.png$/));

// 直接使用即可，imageList就是所有图片的路径数组
// 示例渲染：imageList.map(imgUrl => <img src={imgUrl} alt="" />)

参数说明：

• require.context第一个参数为目标图片所在的相对路径
• 第二个参数为布尔值，代表是否遍历子目录
• 第三个参数为匹配文件的正则表达式，如果你需要匹配jpg、webp等格式，可以修改为/\.(png|jpg|webp)$/

方案2：修正动态import写法 #

如果你需要保留手动指定文件名的逻辑，修正代码如下：

const imageUrls = ['image1.png', 'image2.png', ..., 'image50.png'];

React.useEffect(() => {
  const getImages = async () => {
    try {
      // 添加await等待所有异步导入完成
      const importResults = await Promise.all(
        imageUrls.map((url) => import(`../images/${url}`))
      );
      // 提取ES模块的default属性拿到真实图片路径
      setData(importResults.map(imgModule => imgModule.default));
    } catch (error) {
      console.log(error);
    }
  };

  getImages();
}, []);

方案3：使用public目录静态资源路径 #

如果不需要webpack对图片做压缩、哈希重命名等处理，可以将images文件夹放到项目的public目录下，不需要导入直接拼接路径即可：

const imageUrls = ['image1.png', 'image2.png', ..., 'image50.png'];
const baseImagePath = `${process.env.PUBLIC_URL}/images/`;
const imageList = imageUrls.map(url => baseImagePath + url);

直接使用imageList渲染图片即可，不需要异步导入逻辑。

内容的提问来源于stack exchange，提问作者fitzmode