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

0

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

John
asked 8 months ago674 views
1 Answer
0

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 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 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!

AWS
SUPPORT ENGINEER
answered 8 months ago
profile picture
EXPERT
reviewed 4 months ago

You are not logged in. Log in to post an answer.

A good answer clearly answers the question and provides constructive feedback and encourages professional growth in the question asker.

Guidelines for Answering Questions