Getting failed to load resource error while displaying the image file retrieved from node.js server

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

1 Like

Hello!

What is the name and path of the uploads folder?

When you log the product image value to the console console.log(this.state.product.image); it’s not the same as retrieving the image. The client (browser) at that point knows it has to load a new resource from the server, but hasn’t done so yet, hence the follow up error you mention.

I presume it’s something related to the paths in your server and how you serve them, but I cannot be sure without seeing everything.

Hi,

Thanks for the reply. The name and path of the uploads folder is /uploads.

Please find my frontend react code here: https://github.com/sundarboss/ekartclient.git

My backend nodejs code is here: https://github.com/sundarboss/ekart.git

I would like to let you know the same image is getting displayed correctly in the home page where I am displaying the list of all the products. I am getting error only when I am trying to display the same image file in a separate product detail page.

It would be really helpful if you could help in resolving this issue.

The problem is that you’re using the wrong path: when you’re on a product, you’re requesting the image URL product/uploads/image-name.something, whereas when you’re on the home, the URL is simply uploads/image-name.something.

Change this:

<img className="product-image" src={this.state.product.image} alt={this.state.product.name}></img>

To this:

<img className="product-image" src={'/' + this.state.product.image} alt={this.state.product.name} />

It may lead to other problems in the future, but at least you know where to look :slight_smile:.

Thanks a lot @skaparate. It now works. But could you please brief me on what problems it may cause in the future. Once again thanks.

1 Like

It’s not something you have to worry about as long as you don’t modify the path to the uploads folder.

It’s recommended to never hard code values, instead you should find a way to resolve the path to the correct URL (that’s up to you :stuck_out_tongue:).

1 Like