Amplify: how to fix images that show up locally but not after deployment

Yan Cui

I help clients go faster for less using serverless technologies.

You might have encountered this issue when using Amplify to host your single-page applications.

An image in the public folder would show up perfectly fine when running locally but it was not found on the live site after Amplify deployed your change. Curiously, this only happens with some images – jpeg, avif, webp…

The reason for this is the default rewrite rules Amplify generates:

Notice that jpeg, avif and webp are all missing from the above?

The fix is to edit the rewrite rules and add those file extensions to the regex.

Alternatively, you can try fetching the images from Cloudinary instead. Which offers a number of advantages including:

  • optimize images to webp format on-demand
  • resize images on-demand so you can easily serve different-sized images with the srcset attribute

For other ways to optimize the performance of your single-page application, check out my last post on the 10 performance optimization tips I learned after rebuilding two of my landing pages from scratch.

Whenever you’re ready, here are 3 ways I can help you:

  1. Production-Ready Serverless: Join 20+ AWS Heroes & Community Builders and 1000+ other students in levelling up your serverless game.
  2. Consulting: If you want to improve feature velocity, reduce costs, and make your systems more scalable, secure, and resilient, then let’s work together and make it happen.
  3. Join my FREE Community on Skool, where you can ask for help, share your success stories and hang out with me and other like-minded people without all the negativity from social media.