Изображение Next.js не загружается из Firebase {Next.js 15} ⇐ Javascript

[Anonymous]

В моем коде Next.js 15 Компонент изображения не загружается с локального хоста, но работает в Vercel. URL-адрес изображения также работает, и я выполнил необходимую настройку в файле конфигурации next.js.
Это мой код

Код: Выделить всё

"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
 = ({ 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 (
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
"
>




{truncatetext(data.name)}



{data.reviews.length} reviews

{formatPrice(data.price)}



);
};

export default ProductCard;

это http://localhost:3000/ пример:


Это пример Vercel:


Не знаю причину этого. пожалуйста, помогите мне это исправить.

Подробнее здесь: https://stackoverflow.com/questions/793 ... next-js-15