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
Multiple ways to iterate a loop with index and element in array in swift How to reload a page/component in Angular? How to populate enum object data in a dropdown in angular| Angular material dropdown example How to get the current date and time in local and UTC in Rust example Angular 13 UpperCase pipe tutorial | How to Convert a String to Uppercase exampleRelated posts