Display image from private S3 bucket in reactjs app

Question

I am using Storage and API from aws-amplify

My intention is to get the name of the image from the API and then display it in a tag. Don't know what is wrong.

I can upload images with the following command: Storage.vault.put. I have set the permissions in the IAM-roles. The code goes as follows:

I use the following to get the URL and used vaults as the documentation says it is used for private folders:

useEffect(() => {
        Storage.vault.get("Image.jpg").then(data => {
            setImageUrl(data);
        });
    });

In the markup I set the with the following:

<image src={imageUrl} width="200px" height="200px" alt=""/>

My AWS structure

I use Cognito to manage the login and the IAM reflects this. In S3 the images are located in private/${cognito-identity.amazonaws.com:sub}/here

Developer tool Console:

I suspect you're using the wrong bucket url. The error I'm seeing is "The bucket you are attempting to access must be addressed using the specified endpoint. Please send all future requests to this endpoint.". See https://stackoverflow.com/questions/25027462/aws-s3-the-bucket-you-are-attempting-to-access-must-be-addressed-using-the-spec — Bernie Lenz, Feb 11 '20 at 15:34
Thanks for the reply, Bernie Lenz. It should be the correct bucket as it is the same I upload to. I did not put the correct url here. Any other suggestions? I think it might be something with react and maybe the image tag? — Jacob Kurtsen, Feb 11 '20 at 15:38
It could be permission related as well. I'm curious about the url though as to my knowledge it should be https://s3-us-west-2.amazonaws.com/bucket/subfolder/file.something — Bernie Lenz, Feb 11 '20 at 16:38

0 Answers0