Next.js Image Component Using `priority` Attribute Not Preloading on First Render
I'm testing a new approach and I'm relatively new to this, so bear with me..... I'm experiencing an scenario with the Next.js Image component where setting the `priority` attribute does not seem to preload the image as expected on the initial render. I'm using Next.js version 13.2.0. The component is supposed to load the image immediately, but it appears to be loading later, causing a noticeable delay before the image is visible. Here's the code I'm using: ```jsx import Image from 'next/image'; const MyComponent = () => ( <div> <Image src="/images/hero.jpg" alt="Hero Image" width={1200} height={800} priority /> </div> ); ``` Despite including the `priority` attribute, the Chrome DevTools Network panel shows that the image is not being fetched until after the rest of the page content. I've tried clearing the browser cache and testing in incognito mode, yet the scenario continues. Additionally, I ensured that the image path is correct and that it is accessible. I've also tried moving the Image component outside of any conditional rendering logic to ensure it's mounted on the first render. However, that did not help either. Is there a known scenario with preloading images using the `priority` attribute in this version of Next.js, or is there something I might be missing? Any suggestions for troubleshooting this further would be appreciated. I'm working on a web app that needs to handle this. What am I doing wrong? How would you solve this? Is this even possible? Any ideas what could be causing this?