how to render image from nodejs to react js using axios - node.js

Question

import React, { Component } from "react";
import axios from "axios";
import "./getForm.css";
class GetData extends Component {
state = { posts: [] };
componentDidMount() {
axios
.get("http://localhost:8888/api/v1/user") //returns promise
.then((response) => {
this.setState({ posts: response.data });
console.log("response:", response.data);
})
.catch((err) => {
console.log("err:", err);
});
}
render() {
return (
<>
<h1>Posts</h1>
<table>
<tbody>
<tr>
<th>id</th>
<th>name</th>
<th>email</th>
<th>mobile</th>
<th>status</th>
</tr>
{this.state.posts.map((post) => {
return (
<tr key={post.id}>
<td>{post.id}</td>
<td> {post.name}</td>
<td> {post.email}</td>
<td> {post.mobile}</td>
<td>
<img src={post.image} />
</td>
</tr>
);
})}
</tbody>
</table>
</>
);
}
}
export default GetData;

Answer 1

You can add routes for your photos into Node.js public folder:
...
app.use('/photos', express.static(__dirname + '/public/photos'));
...
Then return image_url from http://localhost:8888/api/v1/user, the URL can be like http://localhost:8888/api/v1/photos/your_image_name.jpg
In your React:
...
<img style={{width:500, height:500}} src={post.image_url)} />
...

Answer 2

Note: Assuming you have the image URL's on your server response.
The posts state is being mapped before you receive the response from your server on the initial render. You can add a loading state which is set to true initially and after the response.data is set in the posts state, you can set loading to false.
You can then conditionally render the whole component based on this loading state like this.
Here is a link to a working sandbox.
import React, { Component } from "react";
import axios from "axios";
class GetData extends Component {
state = { posts: [], loading: true };
componentDidMount() {
this.fetchUserData();
}
fetchUserData = async () => {
try {
const response = await axios.get("http://localhost:8888/api/v1/user");
this.setState({ posts: response.data, loading: false });
console.log(response.data);
} catch (error) {
this.setState({ loading: false });
console.log(error);
}
};
render() {
if (this.state.loading) {
return "Loading";
}
return (
<>
<h1>Posts</h1>
<table>
<tbody>
<tr>
<th>id</th>
<th>name</th>
<th>email</th>
<th>mobile</th>
<th>status</th>
</tr>
{this.state.posts.map((post) => {
return (
<tr key={post.id}>
<td>{post.id}</td>
<td> {post.name}</td>
<td> {post.email}</td>
<td> {post.mobile}</td>
<td>
<img src={post.image} />
</td>
</tr>
);
})}
</tbody>
</table>
</>
);
}
}
export default GetData;