amazon-web-servicesamazon-s3

New image uploaded to S3 bucket not loading on static website


I am using a bucket to host a SIMPLE static website, no frameworks or anything. Everything works fine. However when I made some changes to my website, which included a new image, the new image refuses to load when viewing the website via my domain address.

Currently the new image loads when viewed from my local machine via a live server through VS Code. Changes I push to my website are pushed to Github and an action pushes it all to my S3 Bucket. This all works normally and the new image shows up just fine in the bucket itself. However when I go to the live website, the image does not load, and console shows a 404 error.

I verified the links are identical to other images (with the image name different of course)

I verified permissions in the bucket (it's in the same folder as all other images, but I also manually checked that image was readable)

I cleared browser cache and did a hard reload and tried different browsers.

I can open the link to the image from the images properties in the bucket, and once that works I can delete 'https://us-east-2.console.aws.amazon.com/s3/object/' from the beginning of the url (I use my own domain) and the image still loads.

I even purged my cloudflare cache.

But my website just can not seem to find it.

Is this just an issue with AWS and requires time for AWS to serve the image or have populate in some database somewhere, or however it works, or am I missing something fundamental?

EDIT: The flow of the request is it hits my cloudflare first, with a CNAME to my amazon bucket, which is named after my website www.jamesedens.me The bucket is set to host a static webpage, and the the folder with the images is set to READ for all users. The exact error I get in console is just a generic 404, but if I view the response I get the following:

404 Not Found
Code: NoSuchKey
Message: The specified key does not exist.
Key: images/parking-winds-V2.PNG
RequestId: ZFGT3R0119AAKF4D
HostId: 1VkRxIkB2Egm4YtaaoOvzZGD02K3hxSYEtK6Ib/0zMV+EkOFEDgLi0/Hft00yOcIns4hVSUYUgs=
An Error Occurred While Attempting to Retrieve a Custom Error Document
Code: NoSuchKey
Message: The specified key does not exist.
Key: error.html

So I assume it is S3 that is generating the error.

Interestingly if I double click the offending image in the network tab of the chrome developer console, it will open a new tab and display the above error, then if I click the address bar hit enter, it will load the image up. I can also copy the images' full address that is in the address bar and paste it in different browsers, it also loads up.


Solution

  • You are using capital letters in your URL, when the file uses lowercase letters. If I use chrome dev tools to change the code to the following it shows just fine.

    <img src="images/parking-winds-v2.png" alt="Parking Winds" class="project-image">
    

    enter image description here