Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – 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.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

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

  2. 0

    1. Ensure the "data.images[0].image" URL is a valid public URL and accessible from your localhost environment. Make sure it has at the start of the URL "https://&quot;, that’s the way to use a url in an src property of an image.

    2. Next.js requires explicit configuration for external domains in the next.config.js file. Ensure Firebase’s image domain is added to the images.domains array. For example:

    In your next.config.js, add images property to your module export:

    module.exports = {
  images: {
    domains: ['your-firebase-domain.com'], // Replace with your Firebase domain
  },
};
    1. Make sure you have no CORS set in firebase to allow requests from your localhost
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search