I am trying to display an image file retrieved from express server using the img element in my react app. But the image is not displayed and I am getting ‘Failed to load resource 404 not found’ error. I got the same error when I try to fetch data once the page is loaded, but after some time it suddenly worked. Now I am again getting this error but this time I am not trying to make any request, I am just trying to use the image URL returned by the server in my element. Could anyone please let me know if you have faced this error before as I could not find any answer for this in the internet. Below is my code
class ProductDetail extends React.Component {
constructor(props) {
super(props);
this.state = {
product: {}
}
}
componentDidMount() {
console.log(this.props.match.params.productid)
axios.get(`/api/admin/getproduct/${this.props.match.params.productid}`)
.then((res) => {
console.log(res.data);
this.setState({ product: res.data })
})
.catch(err => {
console.log(err);
})
}
render() {
console.log(this.state.product.image);
return (
<Grid container spacing={3}>
<Grid item xs={4} container justify="center">
<img className="product-image" src={this.state.product.image} alt={this.state.product.name}></img>
</Grid>
<Grid item xs={4} container justify="center">
<h2>Here goes the product details</h2>
</Grid>
<Grid item xs={4} container justify="center">
<h2>Here goes the order details</h2>
</Grid>
</Grid>
)
}
Below is the error I am getting while loading the page and displaying the image. I am not sure why am I getting this error and why it is fetching the image again as it was already fetched.
GET http://localhost:3000/product/uploads/2020-08-31T105209.397Zrealme.jpg 404 (Not Found)
Below is the screenshot of the error that I get
.
).