Search code examples
javascriptreactjsnext.jsvercel

Next.js Image not loading from firebase {Next.js 15}

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 :

enter image description here

This is Vercel example :

enter image description here

Dont know the reason for that. please help me to fix that.

Solution

  • 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
/>