React中如何展示JSON文件存储的图片？加载失败求助

问题描述 #

我试过各种方法，也查了Stack Overflow上的大量方案，但图片就是显示不出来，其他内容都正常。

我的代码 #

JSX代码

<section className='profiles'>
    {
        profiles.map(data => <Person key={data.id} name={data.name} img={data.img} position={data.position} desc={data.desc} comittee={data.comittee} />)
    }
</section>

JSON数据

[
    {
        "id": 0,
        "comittee": false,
        "img": "require('@img/person1.jpg')",
        "desc": "Here's a short description about the person above and what they do and love not to do",
        "position": "member"
    },
    {
        "id": 1,
        "comittee": false,
        "img": "img/person2.jpg",
        "desc": "Here's a short description about the person above and what they do and love not to do",
        "position": "member"
    }
]

问题原因及修复方案 #

1. JSON中require写法无效

JSON是纯数据格式，无法执行JavaScript代码，你把require('@img/person1.jpg')作为字符串写在JSON里，只会被当作普通文本，不会被解析为图片路径。

修复：
将JSON里的img值改成纯路径字符串，去掉包裹的require()：

"img": "@img/person1.jpg"

2. 图片路径需对应React的资源规则

React中图片路径处理分两种场景：

• 图片在src目录下：需要通过require()解析路径，在Person组件里这样使用：

// Person组件内部
<img src={require(props.img)} alt={props.name} />

• 图片在public目录下：直接使用根相对路径，比如图片在public/img文件夹下，JSON里的路径要改成：

"img": "/img/person2.jpg"

组件内直接引用：

<img src={props.img} alt={props.name} />

3. 修复JSON语法错误

你提供的JSON里第一个对象末尾多了一个多余逗号（"position": "member",），这会导致JSON解析失败，务必删除该逗号。

按以上步骤调整后，图片即可正常显示。

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