Next.js Image Component Not Displaying Fallback for optimization URLs
I'm reviewing some code and I am using the Next.js Image component to display images, but I've encountered a question where the fallback image is not rendering when the primary image URL is broken or invalid... I am using Next.js version 12.2.0. My implementation looks like this: ```jsx import Image from 'next/image'; const MyComponent = () => { const primaryImageUrl = 'https://example.com/broken-image.jpg'; const fallbackImageUrl = '/images/fallback.jpg'; return ( <Image src={primaryImageUrl} alt="Description" width={500} height={300} onError={(e) => { e.target.onerror = null; // prevents looping e.target.src = fallbackImageUrl; }} /> ); }; ``` I expected that if the `primaryImageUrl` fails to load, the `onError` handler would kick in and replace it with `fallbackImageUrl`. However, it seems that the `onError` event is not firing at all. I've checked the console for any errors, but nothing appears when the image fails to load. I also tried using a plain `<img>` tag instead to see if it would work: ```jsx <img src={primaryImageUrl} alt="Description" onError={(e) => { e.target.src = fallbackImageUrl; }} /> ``` This approach works as expected, but I want to leverage the optimization features of the Next.js Image component. Is there a known scenario with using the `onError` prop in the Next.js Image component, or is there something I might be missing in my configuration? Any pointers on how to properly handle broken URLs while using the Image component would be appreciated! This is part of a larger application I'm building. What's the best practice here? Has anyone else encountered this?