Image optimization issues in Next.js when using external APIs for dynamic content
I need help solving I recently switched to I'm working on a personal project and I'm working with an scenario with image optimization in a Next.js project (version 12.2.0) when fetching images from an external API....... The `next/image` component is supposed to optimize images on the fly, but I'm getting this behavior: ``` behavior: Image with src "https://example.com/image.jpg" does not have a valid width or height specified. ``` I’ve tried setting both `width` and `height` props directly in the `Image` component, but the behavior continues. Here’s the relevant part of my code: ```jsx import Image from 'next/image'; const MyComponent = () => { const imageUrl = 'https://example.com/image.jpg'; const imgWidth = 800; const imgHeight = 600; return ( <div> <Image src={imageUrl} alt="Dynamic API Image" width={imgWidth} height={imgHeight} /> </div> ); }; export default MyComponent; ``` I also checked the image URL directly, and it loads fine in the browser. I'm using the `next/image` component in a way that is recommended in the documentation, but it seems that the dynamic nature of the image source is causing issues. As a workaround, I tried importing the image statically, which worked perfectly, so I suspect it’s something related to how dynamic URLs are handled by `next/image`. I've also verified that my `next.config.js` allows images from the `example.com` domain: ```javascript module.exports = { images: { domains: ['example.com'], }, }; ``` Has anyone faced a similar scenario, or is there a specific configuration or workaround that I might have overlooked? Any suggestions would be greatly appreciated! For context: I'm using Javascript on Linux. Am I missing something obvious? I'm using Javascript latest in this project. I'd be grateful for any help.