在 React-Native 中使用 AWS Amplify 显示来自 S3 的图像答案

【问题标题】：Display Image from S3 with AWS Amplify in React-Native在 React-Native 中使用 AWS Amplify 显示来自 S3 的图像
【发布时间】：2018-05-19 01:59:39
【问题描述】：

我无法渲染我的图像。我将受保护的图像上传到 S3，没问题。然后我使用下面的代码来检索图像。当我记录 imageReturn 时，我会得到带有令牌的图像 URL。

state = {
    image: ''
}

async getImage(image) {
    let imageReturn = await Storage.get('9807139f-e5b4-428e-8dfb-d7cfeebe87ab.jpeg')
    this.setState({
        image: imageReturn
    })
}

我尝试了两种不同的方式渲染图像，使用 react-native 的 Image 和 'aws-amplify-react-native' S3Image。

<Image source={this.state.image} style={{ width: 100, height: 100 }}/>

和

<S3Image key={'9807139f-e5b4-428e-8dfb-d7cfeebe87ab.jpeg'} />

我们不胜感激。谢谢！

【问题讨论】：

该图像是否需要私有？或者您必须在网络上展示它并且您可以允许任何人访问它？那么我可以告诉你如何得到它[链接]（s3.amazonaws.com/mausamrest/desk.JPG）
它需要任何人都可以看到，但只能由上传它的人编辑。
如果您有多个图像，并且想根据当前登录的用户选择一个图像，您会怎么做？

标签： amazon-web-services react-native amazon-s3 aws-amplify

【解决方案1】：

AWS获取返回图片URL，图片URL打印必须加uri。请重新连接您的代码片段是

<Image source={uri:this.state.image} style={{ width: 100, height: 100 }}/>

【讨论】：

这是问题，需要指定：Storage.configure({ level: 'protected' })