L'image ne se charge pas dans la page
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.
