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.
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"
}
]
Let’s create a react component that contains the following things
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;
🧮 Tags
Recent posts
Ways to skip test case execution in Gradle project build Learn Gradle | tutorials, and examples How to run only single test cases with Gradle build How to print dependency tree graph in Gradle projects How to perform git tasks with build script?Related posts