Saya mahu memuatkan imej gelongsor dalam aplikasi web dan untuk ini saya menggunakan karusel Bootstrap. Dapatkan gambar dari latar belakang. Imej disimpan dalam keadaan imej. Di bawah ialah format JSON untuk mendapatkan data.

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

Selepas memuat naik imej, ia disimpan dalam folder khas dalam Nodejs dan dari situ, saya menggunakan titik akhir untuk mengekstrak imej. Di bawah ialah kod Nodejs

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

Berikut ialah kod ReactJs untuk mendapatkan dan memaparkan imej dalam aplikasi web:

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;

Tetapi tidak tahu mengapa imej tidak dimuatkan dalam apl. Tolong bantu dan jelaskan. Juga, saya menggunakan titik akhir untuk mendapatkan imej dalam img src seperti kod di bawah

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

Jika ada cara yang lebih baik, sila cadangkan.