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 (  
 
 { images.map((pic) => { return ( 
  
 ) }) } 
   Previous    Next  
  ) } 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

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