Fetch image from S3 Bucket using React JS

user_11860557 0
Viewed 10876

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

laravel-6 reactjs amazon-web-services heroku amazon-s3
5 Answers

i faced the same problem and solved the issue 

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

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

user_121556290

<img src={https://bucketname.s3.us-east-2.amazonaws.com/foldername/filename.png} alt="image"/>

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

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

user_131100570

I was able to resolve this by adding the s3 server URL before calling the image directory from the database.

Snippet;

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

This seem to work for me

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