'Fetch image from S3 Bucket using React JS

I have been trying to fetch an image from the s3 bucket to my react UI, my app is made of laravel and react, So I was able to activate the s3 for laravel, and it worked as I was able to render the images to admin end.

Now back to frontend which is made of react, I've been finding it difficult to do, I have installed

  "@aws-amplify/storage": "^1.1.2",
        "aws-amplify": "^1.1.40",
        "aws-amplify-react": "^2.4.4",
        "aws-config": "^1.3.2",

Please I really need help

reactjs heroku laravel-6

Solution 1:^[1]

I was able to resolve this by just adding s3 URL before i call the image directory from the database.

Snippet;

<Image src={'http://innopizza.s3-eu-west-2.amazonaws.com/'+this.props.pizza.image} />

Solution 2:^[2]

i faced the same problem and solved the issue

<Image src={'http://innopizza.s3-eu-west-2.amazonaws.com/abc.jpg'} />

Solution 3:^[3]

I dont think the problem has anything to do with your dependencies but more so with where your files are stored if youre not calling the bucket where they are stored you wont be able to fetch them

Solution 4:^[4]

-the bucket and it's all object must be public

-exact access link of your object is "objecturl" on aws platform

Solution 5:^[5]

This seem to work for me

<img src="https://AWS-OBJECT-URL.s3.amazonaws.com/IMAGE-NAME.jpg" />

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Folorunso
Solution 2	Divya Shrestha
Solution 3	Cairo White
Solution 4	Jain Priyank
Solution 5	atazmin

'Fetch image from S3 Bucket using React JS

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]