Image not loading in page
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.
