Unable to view an image in S3 in browser - amazon-web-services

Question

My goal is to upload a jpg file to s3 bucket and I've done using boto3 library.
When I was trying to open that file in s3 bucket using the displayed link I'm facing an error.
ERROR:
This XML file does not appear to have any style information associated with it. The document tree is shown below.
<Error>
<Code>AccessDenied</Code>
<Message>Access Denied</Message>
<RequestId>7C702F46589DF223</RequestId>
<HostId>
/CbLJfLthWd2n6br7m1fkSy3W71yyKMWavtOxk/8h/afUr3w09cXl5e1eU8lppXSP7AU90jbymE=
</HostId>
</Error>
Edit1:
After following answer suggested by #CaffeinatedCod3r, I'm getting following error.

Answer 1

It looks like you are trying to view the image in browser.
For that, you need to
Open the S3 object in your AWS.
Go to properties of the S3 object.
Go to Metadata section.
There will be a property called Content-Type. It's initial value might be binary/stream. Change that to the type of image like image/jpeg, image/png
or application/pdf (if you are dealing with pdf files) etc.
Now you should be able to view the image or file in the browser tab instead of downloading.

Answer 2

Before you download a file using generated web URL, you need to apply public permissions using "bucket policy" tool.
In order to apply the bucket policy, perform the following steps:
Open S3 management console https://console.aws.amazon.com/s3/
Choose a bucket, click "Permissions", click "Bucket policy".
Apply the policy using AWS policy generator.
You have to apply policy for GetObject.
Note:This will give download permission to everyone who have got the link.
A sample policy would look like this
{
"Id": "PolicyID",
"Version": "2012-10-17",
"Statement": [
{
"Sid": "StmtID",
"Action": [
"s3:GetObject"
],
"Effect": "Allow",
"Resource": "arn:aws:s3:::<YOUR_BUCKET_NAME>",
"Principal": "*"
}
]
}
Edit after #mondyfy answer the policy would be
{
"Id": "PolicyID",
"Version": "2012-10-17",
"Statement": [
{
"Sid": "StmtID",
"Action": [
"s3:GetObject"
],
"Effect": "Allow",
"Resource": "arn:aws:s3:::<YOUR_BUCKET_NAME>/*",
"Principal": "*"
}
]
}

Answer 3

I have also got a similar issue following the answer suggested by #CaffeinatedCod3r, Here I have a slight update on the above answer and it's working, maybe it will be helpful for others:
{
"Version": "2012-10-17",
"Statement": [
{
"Sid": "PublicRead",
"Effect": "Allow",
"Principal": "*",
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::<YOUR_BUCKET_NAME>/*"
}
]
}
Note: In order to view any bucket object in the browser we need to make sure that we have to set Content-Type of media that the browser needs to render as suggested by #Jarvis and object or bucket should have public read access.