Display Image from S3 with AWS Amplify in React-Native

Question

I cannot get my image to render. I upload a protected image to S3, no problem. I then use the below code to retrieve the image. When I log imageReturn I get the image URL with token.

state = {
    image: ''
}

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

I've tried rendering the image two different ways, with react-native's Image and with 'aws-amplify-react-native' S3Image.

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

and

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

Any and all help is appreciated. Thanks!

Answer 1

AWS get return image URL, Image URL printing Must be added uri . Please Rewire Your code Snippest is

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