Bild wird nicht auf Seite geladen

Question

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.

Answer 1

我怀疑客户端和服务器之间的网络错误。由于我假设服务器从不同的端口运行，因此它应该允许从运行 React 应用程序的端口（大概是 3000）进行 CORS 配置。通过检查开发工具，尤其是控制台选项卡，您可以轻松找出答案。

为什么不将图像存储在 React 应用程序静态文件夹中？图像每次都是动态创建的吗？