I’m working on a project where I’m trying to display an image stored as a blob in my database.
However, the image is not rendering on the page as expected.
I’ve added the code for the first file in page.jsx.
Despite this, the image still does not appear.
I need help understanding what might be causing this issue.
"use client";
import React, { useEffect, useState } from "react";
import ServiceCard from "@/app/_components/service-card";
interface Service {
_id: string;
title: string;
description?: string;
actualPrice?: number;
discountPrice?: number;
images?: string[];
}
export default function Home() {
const [services, setServices] = useState<Service[]>([]);
const [loading, setLoading] = useState(true);
useEffect(() => {
const fetchServices = async () => {
try {
const res = await fetch("http://localhost:3100/api/services", {
cache: "no-store",
});
if (!res.ok) throw new Error("Failed to load services");
const data = await res.json();
setServices(Array.isArray(data.data) ? data.data : []);
} catch (err) {
console.error(err);
} finally {
setLoading(false);
}
};
fetchServices();
}, []);
return (
<div className="max-w-6xl mx-auto py-10 md:px-0 px-5">
<section className="container mx-auto py-10">
<h2 className="text-2xl font-bold mb-6">Our Services</h2>
{loading ? (
<p className="text-gray-500">Loading services...</p>
) : services.length === 0 ? (
<p className="text-gray-500">No services available.</p>
) : (
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
{services.map((service) => (
<ServiceCard
key={service._id}
image={service.images?.[0]} // only backend URLs
title={service.title}
price={service.discountPrice || service.actualPrice || 0}
actualPrice={service.actualPrice}
description={service.description}
/>
))}
</div>
)}
</section>
</div>
);
}
I am trying to call an API in this component, but it shows the error “Failed to construct 'URL': Invalid URL.” The API call is not working as expected, and the component fails when building the request URL. I want to understand why this error is occurring. What could be the possible reasons for an invalid URL in this case?
import Image from "next/image";
interface ServiceCardProps {
image?: string; // URL from server
blob?: string; // preview blob from file input
title: string;
price: number;
actualPrice?: number;
description?: string;
}
const ServiceCard: React.FC<ServiceCardProps> = ({
image,
blob,
title,
price,
actualPrice,
description,
}) => {
const isBlob = blob && blob.startsWith("blob:");
return (
<div className="bg-white shadow-md rounded-xl overflow-hidden hover:shadow-lg transition p-4 cursor-pointer">
{/* Image */}
{(image || blob) && (
<div className="w-full h-48 relative">
{isBlob ? (
<img
src={blob}
alt={title}
className="object-cover rounded-lg w-full h-full"
/>
) : (
<Image
src={
image!.startsWith("http")
? image!
: http://localhost:3100${image}
}
alt={title}
fill
className="object-cover rounded-lg"
/>
)}
</div>
)}
{/* Title */}
<h3 className="text-lg font-semibold mt-3">{title}</h3>
{/* Description */}
{description && (
<p className="text-gray-600 text-sm mt-1 line-clamp-2">{description}</p>
)}
{/* Prices */}
<div className="mt-2 flex items-center gap-3">
<span className="text-orange-600 font-bold text-xl">AED {price}</span>
{actualPrice && actualPrice > price && (
<span className="text-gray-400 line-through text-md">
AED {actualPrice}
</span>
)}
</div>
</div>
);
};
export default ServiceCard;