AWS Amplify Failing to Load .webp pictures

For my case

This was rewrite rule exist

[ { "source": "/<*>", "status": "404-200", "target": "/index.html" }, { "source": "</^[^.]+$|\\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf|map|json)$)([^.]+$)/>", "status": "200", "target": "/index.html" } ]

I added to support webp in same rule and redeploy and its works

[ { "source": "/<*>", "status": "404-200", "target": "/index.html" }, { "source": "</^[^.]+$|\\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf|map|webp|json)$)([^.]+$)/>", "status": "200", "target": "/index.html" } ]

The issue you're experiencing with .webp images not loading on your AWS Amplify-hosted React SPA website, despite working locally and being accessible via curl, could be due to a few potential reasons:

1. MIME Type Configuration: Ensure that your AWS Amplify configuration properly recognizes and serves .webp files with the correct MIME type (image/webp). Sometimes, servers may not be configured to serve newer file formats correctly.

2. Caching Issues: Your browser or CDN might be caching an older version of the site or its assets. Try clearing your browser cache or forcing a cache invalidation on the Amplify side.

3. Build Process: Verify that your build process is correctly handling and including .webp files. Sometimes, build configurations might need to be updated to process new file types.

4. Content-Type Header: Check if the Content-Type header for .webp files is set correctly when served by Amplify. Your curl output shows it's correct, but double-check this in your browser's network tab.

5. Redirect Rules: While you've updated the redirect rules to include .webp, ensure there are no conflicting rules that might be preventing these files from being served correctly.

6. CloudFront Configuration: If you're using CloudFront, make sure its configuration is updated to handle .webp files correctly, including any custom behaviors or cache settings.

7. Browser Support: Although unlikely given it works locally, ensure that the browsers you're testing with support .webp format.

To troubleshoot:

• Check your Amplify build logs for any warnings or errors related to .webp files.
• Use browser developer tools to inspect network requests for these images and look for any error responses or unexpected redirects.
• Verify that the .webp files are actually being uploaded to the correct location in your Amplify-hosted environment.
• Try temporarily disabling any custom routing or redirect rules to see if that resolves the issue.

If none of these solve the problem, you may need to contact AWS support for more specific assistance with your Amplify configuration.
Sources
AWS Amplify | Extensible Web & Mobile Apps | Amazon Web Services
Troubleshooting | Amplify UI for React