why is the next/image not loading images on production?

Question

smaple code

`/** @type {import('next').NextConfig} */
const path = require("path");
const nextConfig = {
  reactStrictMode: true,
  unoptimized: false,
  transpilePackages: ["@nextui-org/react", "react-redux"],
  images: {
    formats: ["image/avif", "image/webp"],
    domains: ["firebasestorage.googleapis.com"],
    remotePatterns: [
      {
        protocol: "https",
        hostname: "**",
      },
    ],
  },
};

module.exports = {
  ...nextConfig,
  sassOptions: {
    includePaths: [path.join(__dirname, "styles")],
  },
};`

This is my next config file.

On production, neither local images nor S3 URLs are loading, while on localhost, everything works as expected.


`{"dependencies": {
    "@nextui-org/react": "^2.1.12",
    "@reduxjs/toolkit": "^1.9.5",
    "@types/node": "20.6.2",
    "@types/react": "18.2.21",
    "@types/react-dom": "18.2.7",
    "axios": "1.5.0",
    "firebase": "^10.4.0",
    "framer-motion": "^10.16.4",
    "next": "13.4.19",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-icons": "^4.11.0",
    "react-redux": "^8.1.2",
    "react-responsive-carousel": "^3.2.23",
    "sharp": "^0.32.6"
  },
}`

import { hotelTaj } from "@/public"; <Image src={hotelTaj} className="w-[100%] h-[98vh]" alt="banner" />

When deploying my application on Firebase, I notice that images render correctly in the production environment when using the HTML img tag. However, when I switch to using the Image component from Next.js, the images fail to load in the production environment.