L'image ne se charge pas dans la page

Question

Je souhaite charger des images coulissantes dans une application Web et pour cela j'utilise le carrousel Bootstrap. Obtenez des photos de l'arrière-plan. Les images sont stockées dans l'état d'image. Vous trouverez ci-dessous le format JSON pour obtenir les données.

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

Après avoir téléchargé les images, elles sont stockées dans un dossier spécial dans Nodejs et à partir de là, j'utilise un point de terminaison pour extraire les images. Ci-dessous le code Nodejs

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

Voici le code ReactJs pour obtenir et afficher des images dans une application 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;

Mais je ne sais pas pourquoi l'image ne se charge pas dans l'application. S'il vous plaît, aidez et expliquez. De plus, j'utilise le point final pour obtenir l'image dans img src comme le code ci-dessous

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

S'il existe une meilleure façon, veuillez la suggérer.

Answer 1

Je soupçonne une erreur réseau entre le client et le serveur. Puisque je suppose que le serveur s'exécute à partir d'un port différent, il devrait autoriser la configuration CORS à partir du port sur lequel l'application React s'exécute (vraisemblablement 3000). Vous pouvez facilement le découvrir en consultant les outils de développement, notamment l’onglet console.

Pourquoi ne pas stocker les images dans le dossier statique de l'application React ? Les images sont-elles créées dynamiquement à chaque fois ?