javascript - Next.js Image not loading from firebase {Next.js 15} - Stack Overflow

admin管理员组

文章数量:1123155

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 :

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

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 :

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

• javascript
• reactjs
• next.js
• vercel

Share Follow asked 6 hours ago Nuwan ChamikaraNuwan Chamikara 88722 gold badges1010 silver badges2929 bronze badges

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 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
/>

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://", 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
  },
};

3. Make sure you have no CORS set in firebase to allow requests from your localhost

本文标签： javascriptNextjs Image not loading from firebase Nextjs 15Stack Overflow