AWS Amplify Broken Images; The Trailing Slash Problem.

Images work on local but break on AWS

My images worked on localhost, but break on AWS hosting. Using F12 tools, I find the image URL includes a trailing slash. Likely caused by a greedy redirect rule. We want to redirect .html files, but not .png.

Solution

Improve the redirect rule to exclude image files. This requires some regular expression magic.

</^[^.]+$|\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf|map|json)$)([^.]+$)/>

In plain english: redirect everything unless it ends in one of the file extensions in that list.