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 API在React Native中显示s3中的图像

1 个答案: