Imej tidak dimuatkan dalam halaman

Question

Saya mahu memuatkan imej gelongsor dalam aplikasi web dan untuk ini saya menggunakan karusel Bootstrap. Dapatkan gambar dari latar belakang. Imej disimpan dalam keadaan imej. Di bawah ialah format JSON untuk mendapatkan data.

images:[
{
SNO:'1',
NAME:'image.jpg',
PIC_NAME:'image'
}
]

Selepas memuat naik imej, ia disimpan dalam folder khas dalam Nodejs dan dari situ, saya menggunakan titik akhir untuk mengekstrak imej. Di bawah ialah kod Nodejs

images.get('/Images/getImages/:slug', function(req, res) {
    var options = {
        root: path.join(__dirname, '/images')
    }
    res.sendFile(req.params.slug, options);
})

Berikut ialah kod ReactJs untuk mendapatkan dan memaparkan imej dalam aplikasi web:

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;

Tetapi tidak tahu mengapa imej tidak dimuatkan dalam apl. Tolong bantu dan jelaskan. Juga, saya menggunakan titik akhir untuk mendapatkan imej dalam img src seperti kod di bawah

<img src={`http://localhost:1200/Images/getImages/${pic.NAME}`} class="d-block w-100" alt={`${pic.PIC_NAME}`} />

Jika ada cara yang lebih baik, sila cadangkan.

Answer 1

Saya mengesyaki ralat rangkaian antara klien dan pelayan. Oleh kerana saya mengandaikan pelayan berjalan dari port yang berbeza, ia sepatutnya membenarkan konfigurasi CORS dari port yang sedang dijalankan oleh aplikasi React (mungkin 3000). Anda boleh mengetahuinya dengan mudah dengan menyemak alat pembangunan, terutamanya tab konsol.

Mengapa tidak menyimpan imej dalam folder statik apl React? Adakah imej dicipta secara dinamik setiap masa?