图像未在页面中加载

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 应用程序静态文件夹中？图像每次都是动态创建的吗？