reactjs - 使用 react js 以画廊格式显示图像

Question

我正在尝试在图像容器上显示多个图像。到目前为止，无论图像数量如何，图像都以相同的大小显示。如果图像是单个图像，我希望图像在容器中拉伸，并在多个图像的情况下调整大小并显示。

代码如下：

<>{post.postImagePath ?
                                <div className="postImage">
                                   {
                                   (post.postImagePath.split(',')).map((item,key)=>(<a href={

/user-post/${post.id}/${item}} data-lightbox={image-user-${post.user.id}} ><img src={/user-post/${post.id}/${item}

} key={key} style={{ width: '150px', height: '150px',objectFit:'cover',padding:'10px'}}/></a>)) }
                                    
                                    {/*

<a href={post.postImagePath} data-lightbox={image-user-${post.user.id}}

><img style={{ width: '100%', height: '300px',objectFit:'cover' }} src={post.postImagePath} /> </a>
                                    <a href={imgString[0]} data-lightbox={

image-user-${post.user.id}}

><img style={{ width: '100%', height: '300px',objectFit:'cover' }} src={imgString[0]} /> </a> */}
                                    </div> 

请让我知道如何实现这一目标。我也尝试过使用 react-image-gallery，但图像没有显示。

标签： reactjsimagewebpackimage-gallery