圖像未在頁面中加載

Question

我想在網頁應用程式中載入滑動圖像，為此我使用 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}`} />

如果有更好的方法，請提出。

Answer 1

我懷疑客戶端和伺服器之間的網路錯誤。由於我假設伺服器從不同的連接埠運行，因此它應該允許從運行 React 應用程式的連接埠（大概是 3000）進行 CORS 配置。透過檢查開發工具，尤其是控制台選項卡，您可以輕鬆找出答案。

為什麼不將圖像儲存在 React 應用程式靜態資料夾中？影像每次都是動態建立的嗎？