如何在ReactJs卡中包含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>
    );
  })

我想做的是使用反应Card中的semantic-ui组件来显示S3的图片，我不知道该怎么做。

我当时想使用s3image这样的东西来将值存储到地图中，然后使用Card组件进行迭代并显示图像。我不知道这是否可行，如果可行，怎么办。

感谢您的帮助。

谢谢。

抄送

解决方法

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

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

如果需要卡片的高度相同，请使用cards元素将它们分组在一起。