React从JSON读取图片路径渲染时出现Module not found错误求助

问题原因 #

Webpack（React项目默认打包工具）在构建时需要静态分析资源路径，才能把图片这类静态资源打包到输出目录。当你用变量（比如从JSON里读的item.preview）传给require()时，Webpack没法提前知道要打包哪些图片，所以运行时会抛出「找不到模块」的错误——哪怕你打印出来的路径和写死的完全一致，Webpack的处理逻辑也不一样。

解决方法 #

方法1：手动映射图片（适合少量图片） #

先把所有需要的图片提前导入，存到一个映射对象里，JSON里的路径作为key，渲染时直接取对应的值：

// 导入所有用到的图片
import img1 from './productPic/IMG-1.jpg';
import img2 from './productPic/IMG-2.jpg';

// 建立路径和图片的映射
const imageMap = {
  './productPic/IMG-1.jpg': img1,
  './productPic/IMG-2.jpg': img2
};

// 渲染组件时
{yourProductList.map(item => (
  <img key={item.id} src={imageMap[item.preview]} alt="产品图" />
))}

方法2：用require.context批量导入（适合大量图片） #

如果图片数量多，不想一个个手动导入，可以用Webpack提供的require.context批量读取目录下的图片：

// 创建图片上下文：参数分别是图片目录、是否递归子目录、匹配的文件后缀
const imageContext = require.context('./productPic', false, /\.(jpg|jpeg|png)$/);

// 渲染时，直接通过上下文加载图片
{yourProductList.map(item => (
  <img 
    key={item.id} 
    src={imageContext(item.preview)} 
    alt="产品图" 
  />
))}

注意：require.context的路径是相对于当前组件文件的，要确保JSON里的路径和这个上下文路径匹配。如果JSON里的路径是./productPic/IMG-1.jpg，而上下文已经指定了./productPic，可能需要截取文件名部分，比如imageContext(./${item.preview.split('/').pop()})。

方法3：把图片放到public目录（最简单的方案） #

把图片移到项目根目录的public文件夹下（比如public/productPic/IMG-1.jpg），然后直接用绝对路径渲染，不需要require()：

// JSON里的路径改成'/productPic/IMG-1.jpg'（相对于public的路径）
{yourProductList.map(item => (
  <img key={item.id} src={item.preview} alt="产品图" />
))}

这种方式下，图片不会被Webpack打包，而是直接复制到构建后的public目录，运行时可以直接通过URL访问。

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