如何在 React JS 中使用 map 方法打印數組數據？

Question

你好社區我被困在某個時候我是 React JS 的新手。 我想使用 map function 調用圖像文件。 只有圖像不會出現在網頁上。

這是我的 Array.jsx 文件

const PhotoData = [
   
        {
            imgsrc: gallery_1
        },
        {
            imgsrc: gallery_4
        },
        {
            imgsrc: gallery_7
        },
        {
            imgsrc: gallery_10
        }
    ]

    const PhotoData1 = [
   
        {
            imgsrc: gallery_2
        },
        {
            imgsrc: gallery_6
        },
        {
            imgsrc: gallery_8
        },
        {
            imgsrc: gallery_12
        }
    ]

    const PhotoData2 = [
   
        {
            imgsrc: gallery_3
        },
        {
            imgsrc: gallery_5
        },
        {
            imgsrc: gallery_9
        },
        {
            imgsrc: gallery_11
        }
    ]

    export default [PhotoData,PhotoData1,PhotoData2];

還可以在代碼上方導入畫廊圖像。

這是我編寫代碼的 photos.jsx 文件。

<div className='photo__header-grid'>
                <div className='grid-item'>
                    {
                        PhotoData.map((val,index)=>{
                            return(
                                <div className='gallery-item' key={index}>
                                    <img src={val.imgsrc} alt="gallery_1"/>
                                </div>
                            )
                        })
                    }
                </div>
            </div>

            <div className='photo__header-grid-1'>
                <div className='grid-item'>
                {
                        PhotoData1.map((val,index)=>{
                            return(
                                <div className='gallery-item' key={index}>
                                    <img src={val.imgsrc} alt="gallery_1"/>
                                </div>
                            )
                        })
                    }
                </div>
            </div>

            <div className='photo__header-grid-2'>
                <div className='grid-item'> 

                    {
                        PhotoData2.map((val,index)=>{
                            return(
                                <div className='gallery-item' key={index}>
                                    <img src={val.imgsrc} alt="gallery_1"/>
                                </div>
                                )
                            })
                    }
                </div>
            </div>

圖片不會出現在網頁上。 提前致謝。

Answer 1

我不明白圖像是本地的還是鏈接的，但如果它們是本地的，請嘗試使用src={require(val.imgsrc)} ，如此處所述

Answer 2

將此添加到Array.jsx文件

 const PhotoData = [ { imgsrc: gallery_1 }, { imgsrc: gallery_4 }, { imgsrc: gallery_7 }, { imgsrc: gallery_10 } ]; const PhotoData1 = [ { imgsrc: gallery_2 }, { imgsrc: gallery_6 }, { imgsrc: gallery_8 }, { imgsrc: gallery_12 } ]; const PhotoData2 = [ { imgsrc: gallery_3 }, { imgsrc: gallery_5 }, { imgsrc: gallery_9 }, { imgsrc: gallery_11 } ]; export default { PhotoData, PhotoData1, PhotoData2 };

然后將其導入到photos.jsx文件中

 import { FC } from 'react'; import { PhotoData, PhotoData1, PhotoData2 } from './Array.jsx'; // location of the array.jsx file const Photos: FC = () => { return ( <> <div className="photo__header-grid"> <div className="grid-item"> {PhotoData.map((val, index) => { return ( <div className="gallery-item" key="{index}"> <img src={val.imgsrc} alt="gallery_1" /> </div> ); })} </div> </div> <div className="photo__header-grid-1"> <div className="grid-item"> {PhotoData1.map((val, index) => { return ( <div className="gallery-item" key="{index}"> <img src={val.imgsrc} alt="gallery_1" /> </div> ); })} </div> </div> <div className="photo__header-grid-2"> <div className="grid-item"> {PhotoData2.map((val, index) => { return ( <div className="gallery-item" key="{index}"> <img src={val.imgsrc} alt="gallery_1" /> </div> ); })} </div> </div> </> ); }; export default Photos;