React中如何通过映射JSON列表展示本地图片？

这是因为webpack打包静态资源时，只会识别require()或import导入的路径，直接用JSON里的字符串路径，webpack不会把它当作需要处理的资源，自然找不到图片。下面给你几个可行的解决办法：

方法1：JSON存文件名，渲染时拼接require路径 #

把JSON里的图片路径改成只保留文件名，比如：

[
  { "image": "mern.png" },
  { "image": "react.png" }
]

然后在组件里渲染时，用require拼接固定路径：

{items.map(item => (
  <img key={item.id} src={require(`../images/${item.image}`)} alt="img" />
))}

注意：require里的路径不能全是变量，必须有固定部分（比如../images/），这样webpack才能提前扫描到需要打包的图片资源。

方法2：提前导入图片，用映射对象匹配 #

先在组件里把所有需要的图片导入：

import mernImg from '../images/mern.png';
import reactImg from '../images/react.png';

const imgMap = {
  mern: mernImg,
  react: reactImg
};

然后JSON里的image字段存对应的键名：

[
  { "image": "mern" },
  { "image": "react" }
]

渲染时直接从映射对象取：

{items.map(item => (
  <img key={item.id} src={imgMap[item.image]} alt="img" />
))}

方法3：把图片放到public文件夹（Create React App适用） #

如果你的项目是用Create React App创建的，把图片移到public/images目录下，然后JSON里的路径写成绝对路径：

[
  { "image": "/images/mern.png" },
  { "image": "/images/react.png" }
]

渲染时直接用字符串路径：

{items.map(item => (
  <img key={item.id} src={item.image} alt="img" />
))}

public文件夹里的资源不会经过webpack处理，会直接复制到打包后的根目录，所以可以直接用绝对路径访问。

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