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

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>
    );
  }
}

从 console.log() 我确实得到了正确的 URL 照片（如果我点击它我可以看到照片）并且它有 https，所以这不应该是问题： console

我没有向 API 调用添加访问级别，因此它默认为 'public'，这正是我需要的。

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

谢谢！

Answer 1

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

总是代表一个假值，所以

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

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

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

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

Can't show image from s3 in React Native using Amplify Storage API

image

amazon-s3

react-native

aws-amplify