javascript - 我想使用 Reactjs 根据数组拥有的图像数量显示数组中的 ImagesUrl

Question

我正在使用依赖项 react-responsive-carousel中的 React Carousel来显示用户在 firebase 上上传的图像我查询数组中的图像，例如：

image: [imageUrl/0, imageUrl/1, imageUrl/2, imageUrl/3, imageUrl/4] // Maximum is 5
    //then display it like 
<Carousel 
         infiniteLoop
         showStatus={true}
         showIndicators={true}
         showThumbs={true}
     >
         <div>
         <img src={imagesUrl[0]} alt="title"/>  
         </div>   
         <div>
         <img src={imagesUrl[1]} alt="title"/> 
         </div>
         <div>
         <img src={imagesUrl[2]} alt="title"/> 
         </div>
         <div>
         <img src={imagesUrl[3]} alt="title"/> 
         </div>
         <div>
         <img src={imagesUrl[4]} alt="title" />
         </div>
     </Carousel>

它工作正常但是当用户上传 3 张图像时，它将显示 5 张图像，最后 2 张将是空白的白色图像，是否可以以我只显示数组中的内容的方式映射数组？

Answer 1

您可以遍历图像并显示它们：

使用地图：

...
images.map((image) => {
    return <div>
        <img src={image} alt="title" />
    </div>
})
...