无法使用 Amplify Storage API 在 React Native 中显示来自 s3 的图像

Question

我只是尝试使用 AWS Amplify 的存储显示来自 s3 存储桶的图像并做出本机反应。我的代码如下：

class App extends React.Component {
  state = { fileUrl: '' }
  componentDidMount() {
        Storage.get('vlad-tchompalov-450777-unsplash.jpg')
          .then(data => {
            console.log("data: ", data)
            this.setState({
              fileUrl: data
            })
          })
          .catch(err => {
            console.log("error fetching image", err)
          })
      }
  render() {
    return (
      <View style={styles.container}>
      { this.state.fileURL != '' && console.log('state: ', this.state.fileUrl) &&
        <Image source={{ uri: this.state.fileUrl }} style={{ width: 100, height: 100 }} />
      }
      </View>
    );
  }
}

从控制台.log（）我确实获得了照片的正确URL（如果我单击它，我可以看到照片）并且它具有https，因此这应该不是问题：安慰

我没有向 API 调用添加访问级别，因此它默认为"公共"，这是我所需要的。

我检查了配置和权限，似乎没问题。

谢谢！

Answer 1

console.log('state: ', this.state.fileUrl)

总是表示一个虚假值，所以

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

永远不会被考虑并添加到 render 方法中。删除它将修复该错误。简单地说：

{ this.state.fileURL != '' && <Image ... /> }