Bild wird nicht auf Seite geladen
Ich möchte Schiebebilder in eine Webanwendung laden und verwende dafür das Bootstrap-Karussell. Holen Sie sich Bilder vom Hintergrund. Bilder werden im Bildstatus gespeichert. Nachfolgend finden Sie das JSON-Format zum Abrufen der Daten.
images:[
{
SNO:'1',
NAME:'image.jpg',
PIC_NAME:'image'
}
]
Nach dem Hochladen der Bilder werden sie in einem speziellen Ordner in Nodejs gespeichert und von dort aus verwende ich einen Endpunkt, um die Bilder zu extrahieren. Unten finden Sie den Nodejs-Code
images.get('/Images/getImages/:slug', function(req, res) {
var options = {
root: path.join(__dirname, '/images')
}
res.sendFile(req.params.slug, options);
})
Hier ist der ReactJs-Code zum Abrufen und Anzeigen von Bildern in einer Webanwendung:
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;
Aber ich weiß nicht, warum das Bild nicht in die App geladen wird. Bitte helfen und erklären. Außerdem verwende ich den Endpunkt, um das Bild in img src abzurufen, wie im folgenden Code
<img src={`http://localhost:1200/Images/getImages/${pic.NAME}`} class="d-block w-100" alt={`${pic.PIC_NAME}`} />
Wenn es einen besseren Weg gibt, schlagen Sie ihn bitte vor.
