Next.js Image Component scenarios to Handle WebP Format with Custom Loader
I'm getting frustrated with I'm sure I'm missing something obvious here, but I'm working on a Next.js project (version 12.0.7) where I need to use the Image component to serve images in WebP format for better performance... I've set up a custom loader because I need to fetch images from a third-party API that serves them in different formats based on the requested headers. However, I'm working with a question where the images in WebP format are not being rendered correctly. Instead, I'm seeing a broken image icon with a 404 behavior in the console. Here's the custom loader I've implemented: ```javascript const myLoader = ({ src, width, quality }) => { return `https://myapi.com/image?src=${src}&w=${width}&q=${quality || 75}`; }; ``` And I am using the Image component like this: ```javascript import Image from 'next/image'; const MyComponent = () => { return ( <Image loader={myLoader} src="image-to-load.webp" width={800} height={600} alt="A sample image" /> ); }; ``` I've checked the URL generated by the loader, and it seems correct. When I visit the URL directly in the browser, it serves the WebP image fine, but when I try using it in the Image component, it fails. I've also tried hardcoding the URL and bypassing the loader, but I get the same result. My browser does support WebP, and when I serve JPG images instead, they render without issues. Is there something specific about the Image component or the way Iām handling the WebP format that Iām missing? Any guidance would be appreciated! This is part of a larger CLI tool I'm building. Has anyone else encountered this? How would you solve this?