如何在react js中显示从json文件中读取的图片？

有时候，我们想在React组件中显示json内容的图片。

让我们把employee.json放在reactapplication/src/employee.json中。

[    {        "id": "1",        "title": "Developer",        "firstName": "John",        "lastName": "Eric",        "salary": 5000,        "path": "/assets/imgs/employee/john.jpg"    },    {        "id": "2",        "title": "Tester",        "firstName": "Andrew",        "lastName": "Johnson",        "salary": 6000,        "path": "/assets/imgs/employee/andrew.jpg"    }]

让我们创建一个包含以下内容的react组件

• 使用import导入json文件，并给出json文件的路径
• 它将json文件的内容作为字符串读入一个变量。
• 使用map()函数读取变量并迭代记录。
• 使用javascript表达式创建一个img标签，其src值为记录路径。

下面是一个示例代码

import React, { Component } from 'react';
import employee from './employee.json'
class LocalFileRead extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (

            {employee.map((record, i) =>
                
                    

                    {record.id} - {record.firstName} {record.firstName})}

        
        );
    }
}

export default LocalFileRead;