Showing images stored in s3 bucket

Question

I'm actually having some difficulty understanding how to do this. Before I used to have the images stored right in the server, but moving to production I decided to take this way. So, after storing it in bucket example how exactly should I fetch the picture 19512491.jpg and displaying it in the source?

<img src="image_src_should_go_here"/>

I'm I supposed to edit permission in the bucket and allow permission to read the contents in a given folder, or else? Thank you very much...

Answer 1

The IMG link

First, you would construct a URL that points to the image in Amazon S3.

The exact URL may change depending upon the region in use (see Amazon S3 Endpoints). It would look something like this:

https://s3-ap-southeast-2.amazonaws.com/BUCKET-NAME/image.jpg

If you have configured your bucket as a Static Website, the URL would look like:

https://s3-website-ap-southeast-2.amazonaws.com/BUCKET-NAME/image.jpg

So, you'd use it in an IMG tag, like this:

<img src="https://s3-ap-southeast-2.amazonaws.com/BUCKET-NAME/image.jpg"/>

Security

You can either make the object publicly accessible, or use a Pre-Signed URL.

The easiest way to make the object publicly accessible is to use a Bucket Policy such as this one (from the Amazon S3 documentation) that makes the whole bucket public:

{
  "Version":"2012-10-17",
  "Statement":[
    {
      "Sid":"AddPerm",
      "Effect":"Allow",
      "Principal": "*",
      "Action":["s3:GetObject"],
      "Resource":["arn:aws:s3:::examplebucket/*"]
    }
  ]
}

The policy can, of course, be more selective such as only making a particular directory public.

Alternatively, if you wish to be more selective, you could keep your objects in Amazon S3 private and then have your application generate a Pre-Signed URL that provides authenticated access to an object for a specific time period.

This is a great way to give selective access to files. For example, if you operate a photo-sharing site like Flickr, you could serve private pictures to owners

See documentation: Share an Object with Others