How do I use images from a private Amazon S3 bucket on a QuickSight dashboard?

Resolution

To use images from a private Amazon S3 bucket on QuickSight dashboards or reports, use either the AWS Lambda API or the Amazon CloudFront console.

Lambda API

To use the Lambda API, create a Lambda function, and then create an Amazon API Gateway trigger.

Create a Lambda function

Complete the following steps:

1. Open the Amazon S3 console.
2. In the navigation pane, choose Buckets, and then select your bucket.
3. Choose Upload.
4. Upload the image to the bucket in .jpg format.
5. Run the following command to create an Lambda function:

   import boto3
   import base64
   
   def lambda_handler(event, context):
       s3 = boto3.client("s3")
       downloaded_s3_object = s3.get_object(Bucket="<S3 BUCKET NAME>", Key="<Image.jpg>")
       return base64.b64encode(downloaded_s3_object["Body"].read())

   Note: Replace S3 BUCKET NAME and downloaded_s3_object with your information. The Lambda AWS Identity and Access Management (IAM) role must have the permission to get objects from the S3 bucket. For the Lambda function, set Runtime to Python 3.9.
6. Choose Deploy.

Create an API Gateway trigger

Complete the following steps:

1. Open the API Gateway console.
2. In the navigation pane, choose APIs, and then choose Create API.
3. Under REST API, choose Build.
4. On the Create REST API page, under API details, choose New API, and then enter the following information:
   Enter a name for your API, and then choose Create API.
   (Optional) Enter a description for your API.
   For API endpoint type, select Regional. Then, choose Create API.
5. On the Resources page, under Methods, choose Create method.
6. On the Create method page, enter the following information:
   For Method type, choose GET.
   For Integration type, choose Lambda function.
   For Lambda function, choose the AWS Region and your Lambda function.
7. Choose Create method.
8. On the Resources page, under Method request settings, choose Edit.
9. On the Edit method request page, under HTTP request headers, choose Add header.
10. For Name, enter Content-Type, and then choose Save.
11. On the Resources page, under Integration response, choose Edit.
12. Under Response details, for Content handling, choose Convert to binary, and then choose Save.
13. Deploy your API.
    Note: For more information, see Setting up a stage using the API Gateway console.
14. On the Stages page, under Stage details, note the invoke URL, for example https://1a2bc3d456.execute-api.region.amazonaws.com/test.
15. Open the QuickSight console.
16. In the navigation pane, choose Analyses, and then select the analyses that you want to add the image to.
17. On the Visuals menu, choose Custom visual content.
18. Choose Customize visual.
19. In the Properties pane, under Customize content, enter the invoke URL.
20. Turn on the Show as image option, and then choose Apply.

The API Gateway returns a base64 string of the image. The QuickSight insight editor uses the API's URL to display the Image.

CloudFront console

Complete the following steps:

1. Open the CloudFront console.
2. In the navigation pane, choose Distributions, and then choose Create distribution.
3. On the Create distribution page, enter the following information:
   For Origin domain, enter your origin's domain name.
   For Origin access, choose Origin access control settings (recommended).
   For Origin access control, choose Create new OAC, and then choose Create.
4. Under Web Application Firewall (WAF), select Do not enable security protections.
5. Choose Create distribution.
6. On the Distribution details page, note the distribution domain name, for example, d2icdkfpjckhwg.cloufront.net.
7. In the "The S3 bucket policy needs to be updated" message, choose Copy policy.
8. Open the Amazon S3 console.
9. Under General purpose buckets, select the bucket that hosts the content in the origin domain.
10. On the Bucket details page, under Permissions, choose Edit.
11. Enter the policy, and then choose Save changes.
12. On the Bucket details page, under Objects, select the object.
13. On the Object details page, note the S3 URI, for example s3://your-bucket-name/your_image.png.
14. On a new browser tab, enter the S3 URI, for example d2icdkfpjckhwg.cloufront.net/your_image.png.
15. On the QuickSight dashboard, under Properties, enter the custom URI in the Visual section.
16. Choose APPLY.