Next.js Image not loading from Firebase

In my code Next.js 15 Image component is not loading from the local host but it is working in Vercel. The image URL also working and I have done the necessary configuration in the next.js config file.

This is my code:

"use client";

import { formatPrice } from "@/utils/formatprice";
import { truncatetext } from "@/utils/truncateText";
import { Rating } from "@mui/material";
import Image from "next/image";
import { useRouter } from "next/navigation";

interface ProductCardProps {
  data: any;
}

const ProductCard: React.FC<ProductCardProps> = ({ data }) => {
  const router = useRouter();
  const productrating =
    data.reviews.reduce((acc: number, item: any) => item.rating + acc, 0) /
    data.reviews.length;
    console.log("Main Image URL", data.images[0].image);

  return (
    <div
      onClick={() => router.push(`/product/${data.id}`)}
      className="
        col-span-1
        cursor-pointer
        border-[1.2px]
        border-slate-200
        bg-slate-50
        rounded-md
        p-2
        transition-transform
        duration-300
        ease-in-out
        hover:scale-105
        shadow-md
        text-center
        text-sm
      "
    >
      <div className="flex flex-col items-center w-full gap-1">
        <div className="aspect-square overflow-hidden relative w-full">
          <Image
            fill
            src={data.images[0].image}
            alt={data.name}
            className="w-full h-full object-cover"
          />
        </div>
        <div className="mt-4 font-medium text-gray-700">
          {truncatetext(data.name)}
        </div>
        <div>
          <Rating value={productrating} readOnly />
        </div>
        <div className="text-xs text-gray-500">
          {data.reviews.length} reviews
        </div>
        <div className="font-semibold text-blue-600">
          {formatPrice(data.price)}
        </div>
      </div>
    </div>
  );
};

export default ProductCard;

This is http://localhost:3000/ example:

This is Vercel example:

What is the reason for that?

Disable Next.js Image Optimization

If decoding the URL doesn't fix the issue, the problem may be with how Next.js's image optimization pipeline interacts with Firebase-hosted images. To debug, disable image optimization temporarily by using the unoptimized attribute:

<Image
  fill
  src={data.images[0].image}
  alt={data.name}
  className="object-cover"
  unoptimized
/>