I use an Amazon CloudFront distribution to display images in a browser, but the images don't load.
Short description
Permission or configuration issues, or a 403 or 404 error can block images in CloudFront.
To check whether an error message is preventing the images from loading, open your browser's developer tools. In the Network tab, find the network calls for the image request. In the response header for the request, check for a 404 or 403 error code.
If Server is either Amazon Simple Storage Service (Amazon S3) or a custom origin server name, then the origin returns the error code.
Resolution
CloudFront doesn't have permission to access the Amazon S3 origin
If CloudFront doesn't have permission to the Amazon S3 origin, then the image doesn't load and you get a 403: Access Denied error. To resolve this error, check your S3 bucket policy permissions.
If you configured origin access control (OAC) or origin access identity (OAI) to access images from an Amazon S3 REST API endpoint, then check your configuration. Verify that the bucket policy grants OAC or OAI access to the content in the bucket.
The image doesn't exist in the Amazon S3 origin or custom origin
Make sure that the image is in the specified origin. If the requested image file isn't in the bucket or is in a different folder, then you receive one of the following errors:
- If you use the s3:ListBucket permission on the bucket, then you receive a 404: No Such Key error.
- If you don't use the s3:ListBucket permission, then you receive a 403: Access Denied error.
Behavior path pattern directs the request to an incorrect origin or folder
If your distribution has multiple behaviors with different path patterns, then CloudFront might direct the image to an incorrect origin or incorrect folder. You receive a 404 error. To resolve this error, review the behavior and path pattern for your distribution. Confirm that the request lands on the behavior that matches the path pattern, and that CloudFront forwards the request to the correct origin.
For example, in the following configuration, Behavior1 has a test path pattern that routes the request to the Amazon S3 origin. Behavior2 has the Default(*) path pattern that routes the traffic to an Elastic Load Balancing (ELB) origin.
Behavior1: Path pattern = test ====> S3 origin Default Behavior2: Path pattern = Default (*)=====> ELB origin
When a web browser or application makes a request for https://example.com/test/myimage.png, the distribution matches the Default (*) pattern path. The request doesn't match the test pattern path because there is no wildcard at the end of test. Without a wildcard, this request matches the path pattern for the default behavior and CloudFront forwards it to the ELB origin. Because the object exists in the Amazon S3 origin, the request returns a 404 error and the image doesn't load.
Behavior cache settings aren't configured for header, cookies, or query strings
The origin can require specific headers, cookies, or query strings in the request to serve the image. If CloudFront makes a request, then the images don't load. However, if you make the same request directly to the origin, then the request is successful and the origin returns the requested resources.
To troubleshoot this issue, check if the origin requires specific headers, cookies, or query strings to process requests. Then, allow these requirements in the behavior cache settings.
Use an origin request policy to allow the values (headers, cookies, and query strings) that are included in requests that CloudFront sends to your origin. You can also use legacy cache settings.
Metadata for the image is incorrect in the origin
In the origin, the metadata for Content-Type must be image/png. If it isn't image/png, then CloudFront downloads the image instead of displaying it in your browser.
Cross-Origin Resource Sharing (CORS) error causes the images to not load
If the CORS configuration in CloudFront or the origin is configured incorrectly, then you receive the following error: "No 'Access-Control-Allow-Origin' header is present on the requested resource". To resolve this issue, check your CORS configuration in both CloudFront and the origin.