Image not loading in page

Question

I want to load sliding images in a web application and for this I am using Bootstrap carousel. Get pictures from the background. Images are stored in image state. Below is the JSON format for getting the data.

images:[
{
SNO:'1',
NAME:'image.jpg',
PIC_NAME:'image'
}
]

After uploading the images, they are stored in a special folder in Nodejs and from there, I use an endpoint to extract the images. Below is the Nodejs code

images.get('/Images/getImages/:slug', function(req, res) {
    var options = {
        root: path.join(__dirname, '/images')
    }
    res.sendFile(req.params.slug, options);
})

Here is the ReactJs code for getting and displaying images in a web application:

import React, { useState, useEffect } from "react";
import './landingPage.css'
import Instance from "../Axios/Instance";
const Carousal = () => {
    const [images, setImages] = useState([]);
    useEffect(() => {
        fetchImages();
    }, [])
    async function fetchImages() {
        const result = await Instance.get('/carousalimages/getImages');
        setImages(result.data);
    }
    console.log(images);
    return (
        <React.Fragment>
            <div id="carouselExample" class="carousel slide">
                <div class="carousel-inner">
                    {
                        images.map((pic) => {
                            return (
                                <div class="carousel-item">
                                    <img src={`http://localhost:1200/Images/getImages/${pic.NAME}`} class="d-block w-100" alt={`${pic.PIC_NAME}`} />
                                </div>
                            )
                        })
                    }
                </div>
                <button class="carousel-control-prev" type="button" data-bs-target="#carouselExample" data-bs-slide="prev">
                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                    <span class="visually-hidden">Previous</span>
                </button>
                <button class="carousel-control-next" type="button" data-bs-target="#carouselExample" data-bs-slide="next">
                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                    <span class="visually-hidden">Next</span>
                </button>
            </div>

        </React.Fragment>
    )
}

export default Carousal;

But don't know why the image is not loading in the app. Please help and explain. Also, I use the endpoint to get the image in img src like the code below

<img src={`http://localhost:1200/Images/getImages/${pic.NAME}`} class="d-block w-100" alt={`${pic.PIC_NAME}`} />

If there is a better way, please suggest it.

Answer 1

I suspect a network error between client and server. Since I'm assuming the server is running from a different port, it should allow CORS configuration from the port the React app is running on (presumably 3000). You can easily find out by checking the development tools, especially the console tab.

Why not store images in the React application static folder? Are images created dynamically every time?