Diplay pictures stored in s3 to web page

Question

I am builiding a web app with flask that allows user to update pictures to it. The pictures then get displayed on the web page.  
I was able to connect flask with S3 to upload pictures to my bucket, but I can not display them on my page.  
  
Is it possible to use something like this in my html to return the pictures?   
<img height="200px" width="200px" src="https://oldports-static-images.s3.us-east-2.amazonaws.com/fun_E4173.jpg">  
why wouldn't this work?  
  
My bucket has public read permissions (I think), I would expect that if I opened the link I would see the pictures? I get an error message.  
https://oldports-static-images.s3.us-east-2.amazonaws.com/fun_E4173.jpg  
  
I appreciate any help I can be given, I am new to development and this part is overwhelming to me.

Accepted Answer

Hi,   
Most likely you just need to set the Bucket Policy to public so that anyone can view the images (and they will be available for use to embed in your web page).  
1. Go to Services - Amazon S3  
2. Click on the link to your bucket "oldports-static-images"  
3. Click on Permissions. Make sure you have "Block public access" set to Off. If no, hit the Edit Button and set to Off.  
4. If "Bucket Policy" is NOT marked "Public", then click on Bucket Policy (on Permissions tab).  
5.  Enter the Following Bucket Policy:

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

6. Hit Save  
7. You should now see the Bucket Policy and Permissions both tagged with "Public"  
You should now be able to upload any files to this bucket and reference them with your URL.  
  
Hope this helps!  
-randy

Answer

Thank you very much! It worked!

Diplay pictures stored in s3 to web page

相关内容