I am receiving a bindata from the Nodejs server and now from that I need to display an image.
How can I achieve this? Is there any method to convert bindata to JPEG or any other format? Or is it possible to convert that in server and then send that image to react?
Here's how I'm trying to display the binary data (item.Image.data.data) with an image tag:
<img src={item.Image.data.data} />
This is my detailed react code snippet:
componentDidMount(){
let self = this;
axios.get('http://localhost:8080/list')
.then(function(data) {
console.log(data);
self.setState({post:data.data});
});
}
<ul className="w3-ul w3-card-4 w3-light-grey">
{ this.state.post.map((item, index) => {
return (
<Link to="/displaylist" style={{ textDecoration: 'none' }} key={index}>
<li className=" w3-hover-green w3-padding-16" onClick={this.handleClick(item.Id)}>
<img src={item.Image.data.data} className="w3-left w3-circle w3-margin-right" width="60px" height="40px" />
<span>{item.Firstname}</span><br/><br/>
</li>
</Link>
)}
)}
</ul>
This is my nodejs code snippet:
server.get('/list', function(req, res) {
databaseInterface.listStudent(function(err, students) {
var myJSON = students;
res.json(myJSON);
// You should see the newly saved student here
});
});
<img src="data:image/jpeg;base64,{binary data}" />I think this should work