Images not loading on static website hosted on S3

The re:Post Agent answer is good but if it were me I would be looking at point (5) - using CloudFront.

Why? Because then you don't have to make the bucket public; you can take advantage of services such as WAF (if you want); CloudFront caches objects closer to your users so their may be a performance improvement; you get 1TB of data free every month; and you get HTTPS support.

What's not to like?

Instructions on setting up Origin Access Control (OAC) between CloudFront and S3: https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/private-content-restricting-access-to-s3.html

It seems like you've taken many of the correct steps to set up your static website hosting on Amazon S3, but there are a few additional things to check that might resolve your image loading issue:

1. Content-Type Metadata: Ensure that the Content-Type metadata for your image files is set correctly. Sometimes, S3 might not automatically set the right content type, which can cause browsers to misinterpret the files. You can manually set this for each image file in the S3 console or through the AWS CLI.

2. Object-Level Permissions: While you've set a bucket policy, it's worth checking the individual permissions on the image objects themselves. Make sure they don't have any conflicting ACLs (Access Control Lists) that might be overriding the bucket policy.

3. File Names and Paths: Double-check that the file names and paths in your HTML/CSS/JS files exactly match the names and paths of the files in your S3 bucket. S3 is case-sensitive, so even small discrepancies can cause 404 errors.

4. CORS Configuration: If your images are being loaded from a different domain or subdomain, you might need to set up CORS (Cross-Origin Resource Sharing) on your S3 bucket.

5. CloudFront Distribution: If you're using CloudFront in front of your S3 bucket, ensure that the distribution settings are correct and that the cache isn't serving old content.

6. Bucket Region: Make sure you're using the correct S3 website endpoint URL for your bucket's region.

7. Block Public Access Settings: Verify that the "Block Public Access" settings at both the account and bucket level are not preventing public read access to your objects.

If you've checked all these points and are still experiencing issues, you might want to try accessing one of the image files directly through its S3 URL to see if you can isolate the problem. Also, consider using the AWS CLI to list the objects in your bucket and verify their permissions.

Remember, when troubleshooting S3 static website hosting, it's often helpful to start with a single test file to confirm basic functionality before expanding to your full site content.
Sources
Rendering problem of the static website hosting | AWS re:Post
I have made my S3 bucket publicly accessible for my images to show up still access is denied | AWS re:Post
S3 Express One Zone - how to get a permmition to display the images on my website | AWS re:Post
Some of the images of S3 bucket is not accessible. | AWS re:Post