Images fail to load in Nextjs 14 once deployed to Production

Question

In Nextjs 14, images fail to load in production environment. In local environment, the images load just fine.

• Images are stored under public folder
• Project builds Ok and is hosted on Vercel

I am using Nextjs Image component for automatic image optimization.

I did update the next.config.js file to

const nextConfig = {
  images: {
    remotePatterns: [
      {
        protocol: "https",
        hostname: "*",
      },
    ],
  },
};

module.exports = nextConfig;

and made sure that all Image components satisfied the requirements i.e. alt, width, and height attributes.

What could be the issue?