Can you add some code?

<div className="text-white relative">
<div className="block lg:h-[80vh] 2xl:h-[87vh] w-full">
<CustomImage width={1280} height={640} sizes="100vw" priority={true} alt="EduOptions Abroad Team" src="/images/aboutUs/about-banner.png" />
</div>
<div className="absolute bottom-6 left-5 right-5 lg:left-20 lg:bottom-20 lg:right-0 2xl:left-36 lg:max-w-[680px] 2xl:max-w-[842px] animate-banneranimate opacity-100 delay-100">
<h1 className="text-[32px] font-bold leading-[42.24px] mb-4 font-montserratBold lg:text-5xl lg:leading-[68.64px] lg:mb-6">
Giving wings to your{" "}
<span className="text-secondary1">study abroad dreams</span> since a
decade 123
</h1>
<p className="text-base lg:text-xl ">
{data.banner.content}
</p>
</div>
</div>

import Image from "next/image";
import React from "react";

export default function CustomImage({ width, height, src, alt, priority, sizes }) {
return (
#Unknown Channel
<Image
width={width}
height={height}
src={src}
alt={alt}
priority={priority}
sizes={sizes}
className='w-full h-full object-cover'
/>
</>
)
}
@Anay-208

share a preview

and also, I recommend using codeblocks like this

export default

@Anay-208 check the prview

first loads it comes white screen then after 1 or 2 sec it shows banner image

It could be due to size of image maybe?

size of the image 646kb @Anay-208

can you share a screen recording of this issue with inspect tab open?

You can show skleton loading or any other loading while image is fetching