Next.js Image Component scenarios to Render WebP Format for Specific Images
I've tried everything I can think of but I'm using the Next.js Image component (version 12.0.7) to serve images on my website, and I'm working with an scenario where certain images in WebP format are not rendering at all... The images are present in the public directory, and I expected them to be optimized by the Next.js image optimization feature. I've added the following code for the Image component: ```jsx import Image from 'next/image'; const MyComponent = () => { return ( <div> <Image src="/images/my-image.webp" alt="My WebP Image" width={600} height={400} priority /> </div> ); }; export default MyComponent; ``` When I inspect the page, the image is not displayed, and I see the following behavior in the console: ``` behavior: Image with src "http://localhost:3000/images/my-image.webp" has been blocked from loading. Check your network settings. ``` I’ve confirmed that the image file exists at the specified path and can be accessed directly in the browser. I also tried clearing my browser cache and reloading the page, but the scenario continues. Additionally, the image works fine when accessed directly via URL. I’ve also checked my `next.config.js` file to ensure there are no specific configurations that might be blocking WebP images: ```javascript module.exports = { images: { domains: ['localhost'], }, }; ``` Could this be a question related to the image source or format, or is there something else I might be missing? Is there a specific configuration required for serving WebP images using the Next.js Image component? Any help would be greatly appreciated! I'm working on a microservice that needs to handle this.