my goal is to preload the LCP image of my homepage.

I'm using Next.js 14 with app router. I tried to add the priority prop to my LCP image but PageSpeed Insights is still showing me bad score for the LCP metric.

I think the issue is that I'm trying to render this LCP image in client component that rendered inside my server component. for example:

'use client';
const MyClientComponent = () => {
  // ...

  return (
   // .....
   <Image
    src={"...."} // <---- The src is external URL (The image not exist in public directory)
    alt="hero-image"
    width={1920}
    height={800}
    loading="eager"
    priority
   />
  );
}



const MyServerComponent = () => {
 // ...
 return <MyClientComponent />
}

The question is if it's actually possible to preload image like that? I think I have bad LCP score because I'm trying to tell my application to preload the LCP image when it's already rendered on the client.

Thank you for your help.