Next.js Image Component scenarios to Load WebP Format Images During SSR
I'm relatively new to this, so bear with me. Quick question that's been bugging me - I'm using the Next.js Image component to display images in WebP format, but I'm working with an scenario where the images do not render during server-side rendering (SSR)..... When I load the page, I see a blank space where the image should be, and inspecting the element reveals that the `src` attribute is set to the correct URL, but the image fails to load. This scenario does not occur when I use JPEG or PNG formats. I’ve verified that the WebP images are accessible via direct URL in the browser. Here’s a snippet of my code: ```javascript import Image from 'next/image'; const MyComponent = () => { return ( <div> <Image src="https://example.com/image.webp" alt="My WebP Image" width={500} height={300} quality={100} /> </div> ); }; export default MyComponent; ``` I’m running Next.js version 12.0.7 and I’ve checked my `next.config.js` file to ensure there are no specific configurations that could interfere with image loading. I also tried switching the `loader` prop to a custom loader that I implemented, but it didn't change anything. Additionally, I've confirmed that my server supports serving WebP images. This only happens during SSR; if I navigate to the page client-side after the initial load, the WebP image displays perfectly. Has anyone experienced this scenario and found a workaround or solution? The stack includes Javascript and several other technologies. Any suggestions would be helpful. I'm developing on macOS with Javascript. Hoping someone can shed some light on this.