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
Julia examples - Variable Type Nim example - Convert String to/from the Int How to get length of an array and sequence in Nim? Nim environment variables - read, set, delete, exists, and iterate examples? How to convert from single character to/from string in Nim?Related posts