圖像未在頁面中加載
我想在網頁應用程式中載入滑動圖像，為此我使用 Bootstrap 輪播。從後台取得圖片。影像儲存在影像狀態中。下面是取得資料的 JSON 格式。
images:[
{
SNO:'1',
NAME:'image.jpg',
PIC_NAME:'image'
}
]
上傳圖像後，它們儲存在 Nodejs 中的一個特殊資料夾中，從那裡，我使用端點提取圖像。下面是 Nodejs 程式碼
images.get('/Images/getImages/:slug', function(req, res) {
var options = {
root: path.join(__dirname, '/images')
}
res.sendFile(req.params.slug, options);
})
下面是用於在 Web 應用程式中取得和顯示圖像的 ReactJs 程式碼：
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;
但不知道為什麼圖像沒有在應用程式中載入。請幫忙並解釋一下。 另外，我使用端點來獲取 img src 中的圖像，如下面的程式碼
<img src={`http://localhost:1200/Images/getImages/${pic.NAME}`} class="d-block w-100" alt={`${pic.PIC_NAME}`} />
如果有更好的方法，請提出。
