Image Working on Localhost but Broken in Production in Next.js

Question

I'm working on a Next.js project where images display correctly on localhost. After running npm run build and npm start, everything works fine locally. However, once deployed to production, the images do not display and appear broken.

I tried using the Next.js Image component and installed sharp for image optimization. I placed the images in the public folder of my Next.js project.

<Image
  width={382}
  height={346}
  loading="eager"
  priority={true}
  className="hero-image-common-properties hero-image-1"
  src={"/hero-image-1.png"}
  placeholder="blur"
  blurDataURL={AllImages.fallbackPlaceholder.src}
  alt="hero-image-1"
/>;

I also configured the next.config.js file as shown below:

const nextConfig = {
  reactStrictMode: true,
  experimental: {
    appDir: false,
  },
  images: {
    remotePatterns: [
      {
        protocol: "https",
        hostname: "data.xyz.com",
      },
    ],
  },
};

module.exports = nextConfig;