Next.js Image Component Not Displaying WebP Format on Safari with Cache Issues
I'm wondering if anyone has experience with I'm writing unit tests and I'm using the Next.js `Image` component (v12.1.0) to display images on my website, and I've encountered a peculiar scenario... While the images load perfectly in Chrome and Firefox, they unexpected result to display in Safari, specifically when using WebP format. The images seem to be cached because when I refresh the page, I still see the broken link icon instead of the image. I've attempted to serve the images in both WebP and PNG formats, but the question continues with WebP. Here’s the code snippet I’m using for the `Image` component: ```jsx import Image from 'next/image'; const MyComponent = () => { return ( <div> <Image src="/path/to/image.webp" alt="Example Image" width={500} height={300} priority /> </div> ); }; export default MyComponent; ``` I've also tried setting the `unoptimized` prop to `true`, as suggested in some forums, but that didn't help. Additionally, I checked my server settings and confirmed that it supports WebP images. When I inspect the elements in Safari, I see a 404 behavior in the network tab indicating that the image couldn't be loaded, but the image URL is correct. Is there a specific setting or a workaround for the Next.js Image component to ensure compatibility with Safari for WebP images? Any insights or similar experiences would be greatly appreciated. This is part of a larger CLI tool I'm building. Could someone point me to the right documentation? The stack includes Javascript and several other technologies. Thanks for your help in advance!