我想使用 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>
})
...

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

I Want To Display The ImagesUrl's In The Array according To The Number of images the Array has, using Reactjs

javascript

reactjs

react-responsive-carousel