Reactjs 如何在JS卡中包含s3image

我正在使用AWS上托管的reactJ开发一个照片共享应用程序。 一切都很好，但我很难有一些风格的图像。 基本上我有这段代码

const PhotosList = React.memo((props) => {
    const PhotoItems = (props) => {
      return props.photos.map(photo => {
        return (
                  <S3Image 
                    key={photo.thumbnail.key} 
                    imgKey={'resized/' + photo.thumbnail.key.replace(/.+resized\//, '')}
                    level="private"                            
                  />
        )
      }
      );
    }
  
    return (
      <div>
        <Divider hidden />
        <PhotoItems photos={props.photos} />
      </div>
    );
  })

constphotoslist=React.memo（（道具）=>{
常量照片项=（道具）=>{
返回props.photos.map（照片=>{
返回(
)
}
);
}
返回(
);
})

我想做的是使用react

semantic ui

中的

Card

组件来显示S3中的图片，我不知道该怎么做

我想让类似于s3image的东西将值存储到地图中，然后使用Card组件迭代并显示图像。我不知道这是否可能，如果可能，怎么做

谢谢你的帮助

谢谢

---

C.C.

如果您将一组s3图像源作为道具传递，则可以使用如下卡组件：

const PhotosList = React.memo(props => {
  return props.photos.map(photo => (
    <Card>
      <Image src={photo} wrapped ui={false} />
    </Card>
  ))
})

constphotoslist=React.memo（props=>{
返回props.photos.map（照片=>(
))
})

---

如果您需要卡片具有相同的高度，请使用cards元素将其分组。

我不知道如何使用key和imgkey您如何从s3检索数据？你能发布你的数据结构吗？事实上，我设法把图像包装在一张卡片里。我已经在图像中添加了一些样式。