在 AWS Amplify 部署后，static web 应用程序中的图像未显示

Question

I'm having some trouble getting images to work after my app is deployed to AWS Amplify. I created a pretty simple app that consists of just HTML, CSS and JS files (no angular/react/flutter etc.). My folder structure is currently:

- .html files
- styles.css
--- scripts
   |___app.js
   |___config.js
   |___aws.js
--- images
   |___image1.PNG
   |___image2.PNG
   |___image3.PNG
   |___image4.PNG

In my app.js file, I've got a few dynamic image creations setup in the same way (just different variable names and image files):

var image = document.createElement('img');
image.src = '../images/image1.png';
image.addEventListener('click', myFunction);
image.style.cursor = 'pointer';

Specifically the image.src line; I've tried different combinations such as:

1. image.src = '../images/image1.png';
2. image.src = './images/image1.png'; (one suggestion I found said to remove one of the periods (not sure why))
3. image.src = '/images/image1.png'; (placing the images folder inside the scripts folder)
4. image.src = 'image1.png'; (placing the actual images at the same level as the scripts)
5. I've even tried placing the images in an S3 bucket, and then using #3 add an image rewrite as described here: AWS Rewrite/Redirect Documentation .

No matter what I try, after pushing my code to GitHub and then after my AWS Amplify app finishes building the code, when I go to website, all the images are showing as if they couldn't be found and the dev console always shows something along the lines of Image could not be found. The server returned with: 404 Could not be found error Image could not be found. The server returned with: 404 Could not be found error .

The code works perfectly fine and the images show up on my local machine when I open the Live Preview using either Brackets.io or VS Code, just not when deployed to Amplify.

I've also tried setting up in the Amplify console the Rewrites and Redirects as it mentions in this Github forum: Github Forum but to no avail. My current Rewrites and Redirects section of the Amplify console effectively look like what's shown in the first link.

I've got to be missing some kind of setup to get this working but I'm not sure what it is. Hopefully it's a simple fix and I don't need to effectively re-do the project some other way.

Thank you in advance for any assistance.

Answer 1

I figured it out. I decided to try and use GitHub Pages instead to see if the same problem occurs there and it does. I did some research on why it wouldn't show up there and I found this article: GitHub Pages Stackoverflow which basically says that the filename, extension and folders are all case sensitive. I didn't think that AWS Amplify would have this problem but it does.

My files had .PNG as the file extension but in the code I used .png . After changing it in the code and re-deploying, it worked.