React从JSON读取图片路径加载报错的问题求助

问题原因 #

React项目使用的打包工具（如Webpack、Vite）会在编译阶段静态分析资源路径，只有直接写在代码里的静态字符串路径（比如require("../../static/images/Jstar.jpg")）能被正确识别并打包。从JSON中读取的动态路径，编译工具无法提前解析，因此会抛出Cannot find module错误。

解决方案 #

方案1：预导入图片，JSON存标识符

先在代码中手动导入需要的图片，JSON里只存图片对应的标识符，组件通过映射关系使用图片。

// 1. 预导入图片
import jstarImg from "../../static/images/Jstar.jpg";

// 2. 修改JSON内容，存储图片标识符
{
  "pastExperiences": [
    {
      "pictures": ["jstarImg", "", ""],
      "companyName": "示例公司"
    }
  ]
}

// 3. 组件中通过映射使用
import WorkExperiences from "../../Scripts/Json/WorkExperiences.json";

const imageMap = {
  jstarImg
};

<CardMedia
  component="img"
  height="194"
  image={imageMap[WorkExperiences.pastExperiences[0].pictures[0]]}
  alt={WorkExperiences.pastExperiences[0].companyName}
/>

方案2：将图片放入public文件夹，使用绝对路径

把图片移动到项目根目录的public文件夹下（比如public/static/images/Jstar.jpg），JSON中存储绝对路径，组件直接使用该路径，无需require。

// JSON内容
{
  "pastExperiences": [
    {
      "pictures": ["/static/images/Jstar.jpg", "", ""],
      "companyName": "示例公司"
    }
  ]
}

// 组件使用
import WorkExperiences from "../../Scripts/Json/WorkExperiences.json";

<CardMedia
  component="img"
  height="194"
  image={WorkExperiences.pastExperiences[0].pictures[0]}
  alt={WorkExperiences.pastExperiences[0].companyName}
/>

方案3：用require.context批量导入（Webpack专属）

通过Webpack的require.context批量加载指定目录下的所有图片，然后根据JSON中的路径匹配获取图片资源。

// 1. 创建图片上下文，指定图片目录、是否递归、匹配后缀
const images = require.context('../../static/images', false, /\.(png|jpe?g|svg)$/);

// 2. 组件中使用
import WorkExperiences from "../../Scripts/Json/WorkExperiences.json";

<CardMedia
  component="img"
  height="194"
  image={images(WorkExperiences.pastExperiences[0].pictures[0])}
  alt={WorkExperiences.pastExperiences[0].companyName}
/>

方案选择 #

• 图片数量少、固定：选方案1，逻辑清晰。
• 希望简化配置：选方案2，无需处理导入逻辑，直接用绝对路径。
• 图片数量多、路径规范：选方案3，批量导入更高效。

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