{

How to display image read from json file in react js?


Sometimes, We want to display the image from json content in React Component.

The related posts:

Let’s have employee.json located in 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"
    }
]

Display image from the url given in a json file in react application

Let’s create a react component that contains the following things

  • import json file using import with a given path of json file
  • It read json file content as a string into a variable.
  • variable read and iterate records using map() function.
  • create an img tag with src value is record path using javascript expression

Here is an example code

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

    render() {
        return (<div >

            {employee.map((record, i) =>
                <div key={i}>
                    <img src={record.path} />

                    {record.id} - {record.firstName} {record.firstName}</div>)}

        </div>
        );
    }
}

export default LocalFileRead;
THE BEST NEWSLETTER ANYWHERE
Join 6,000 subscribers and get a daily digest of full stack tutorials delivered to your inbox directly.No spam ever. Unsubscribe any time.

Similar Posts
Subscribe
You'll get a notification every time a post gets published here.