gatsby image not showing when hosted in aws amplify, but ok on local development / netlify / gatsby cloud

user_1160080 0
Viewed 566

the test

i'm trying out gatsby with starter "Gatsby Default Starter" via

gatsby new test

with no customization made, i tested it on localhost, and it looks ok with the image showing properly.

updates on 2021-06-22 - all links removed, screen capture added in reddit.

the problem

but as you can see, only the one on aws amplify have the image missing, while those on netlify and gatsby cloud looks ok and stay consistent to my local development tests.

anyone has any idea why ? how should i proceed to make it show also on aws amplify ? i do prefer the dashboard of aws amplify and my test is for a upcoming project.

aws-amplify netlify
2 Answers

I had this same problem and stumbled across this question in my quest to solve it. However, I was unable to solve the issue based on the information provided here or on the original poster's Reddit link. I needed to do additional research and now post this answer to provide additional context and clarity. My app was created using Gatsby version 4 and deployed with AWS Amplify.

In the AWS Amplify Console, choose the app you are working on, then under "App Settings" click on "Rewrites and redirects." Then in "Rewrites and redirects" click the "Edit" button and add the file type you need to the regular expression for the 200 (Rewrite) rule that should be there by default.

The original poster seems to have solved this by adding "avif" to the regular expression. However, Gatsby generates "webp" images and that was the file extension I had to add to make this work. Below is a screen shot. Hope this helps anyone else who has this issue in the future.

Screen shot

user_164826150
user_11600800
Related