React组件动态加载图标报错，Parcel打包环境下如何解决？

方法一：在图标映射对象中直接存储require结果 #

修改weatherIcons对象，把每个路径字符串替换为require()调用的结果，让Parcel在构建时就能静态识别并打包对应的图片资源：

const weatherIcons = {
  // ... 其他图标映射
  "Heavy_Rain": require("../assets/images/icons8-heavy-rain-96.png"),
  // ... 其他图标映射
};

之后在组件里直接使用映射值即可：

<img className="img-fluid" src={weatherIcons.Heavy_Rain} />

方法二：用ES模块import导入图标 #

也可以提前用import语法导入所有需要的图标，再存入映射对象：

import heavyRainIcon from "../assets/images/icons8-heavy-rain-96.png";
// 导入其他需要的图标...

const weatherIcons = {
  // ... 其他图标映射
  "Heavy_Rain": heavyRainIcon,
  // ... 其他图标映射
};

组件中的使用方式和方法一完全一致。

问题原因 #

Parcel是静态打包工具，需要在构建阶段明确知晓所有要打包的资源路径。当你用require(weatherIcons.Heavy_Rain)时，weatherIcons.Heavy_Rain是动态变量，Parcel无法在构建时解析它对应的具体路径，因此抛出找不到模块的错误。而直接传入字符串路径、或提前用require/import处理路径，Parcel能静态识别资源并完成打包。

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