Trying to download a image and show it in react native screen ? from AWS Amplify s3 storage

Question

i initialised a expo router project with 2 screens . i connected my app with the backend using aws amplify . i created a basic authentication and deployed in the app and configure the amplify the authentication is working fine. then created a storage in the aws amplify and gave the public access ,uploaded a image in the s3 bucket . when iam trying to show the show the uploaded image in my app it is not showing the image . it is rendering but i cannot see the image .the width and height is given but the image is not downloading from the s3 bucket

Here are screenshots: This is the screen where we are trying to show the image and log too Enter image description here continuation

This image is the config file![ config ] config

Mobile output

Thanks

Here are screenshots:
This is the screen where we are trying to show the image and log too ![Enter image description here](/media/postImages/original/IMZ2bt923TTGqwtgHL_A9tmQ)
![continuation ](/media/postImages/original/IMqY9DO8boTr6K_Jgi8ff5Qw)

This image is the config file![ config ]![config](/media/postImages/original/IMyf96esxESAaH3RhmAxZJ3Q)

![Mobile output ](/media/postImages/original/IM4AexGsoETHG9-PByAALVvQ)

Thanks

Answer

Hello,

Thank you for reaching out to us.

I understand you are observing issue while rendering the image downloading from S3 bucket using Amplify. You are trying to render the image in iOS simulator using Expo.

Thank you for sharing the screen shot of the code and the issue being observed. From the images, I can see the signed URL is being generated from the `Storage.get()` function. Furthermore, when this URL is being passed as the source attribute for Image tag, the image is not being rendered. To troubleshoot the issue, I would suggest following troubleshooting steps:

1. From the screen shot, I see the `imageKey` in line 251 under `App.js` has spaces at the start and end. Furthermore, I see those spaces are being URL encoded in the signed URL generated from the `Storage.get()` function. The generated URL has the path `%20imawgswe.png%20`. Here the `%20` is the URL encoding for space ( ). Hence, I would request you to confirm the imageKey is mentioned properly in the code.

2. In case mentioning the correct imageKey, the image is still not being rendered, I would suggest to confirm if the image is within the public folder in the root of the S3 bucket. Please note that, by default if no [access level](https://docs.amplify.aws/javascript/prev/build-a-backend/storage/configure-access/) is specified, `Storage.get()` function look for the key in the public folder only. Hence the image, `imawgswe.png` should be under the `/public` folder in the S3 bucket. Please confirm if the file exists by looking into the path in the URL generated from the `Storage.get()` function.

I hope with the above troubleshooting steps, you should be able to resolve the issue of image not being rendered.

Additionally, I would suggest to include the `alt` attribute in the Image tag to confirm if the image already loaded or there are any issues while loading the image. Please refer to the third party [document](https://reactnative.dev/docs/image#alt) for more information on the same. Having said that, please feel free to attach any follow up queries you may have. I should be delighted to assist you further.

Have an excellent rest of the day and stay safe!

Trying to download a image and show it in react native screen ? from AWS Amplify s3 storage

Relevant content