Next.js Image Component scenarios to Load SVGs with Dynamic URLs from External API
I'm a bit lost with I'm confused about I'm performance testing and I'm currently working on a Next.js application (v12.1.0) where I'm trying to load SVG images dynamically from an external API..... The API returns a URL for the SVG image, but when I use the Next.js `Image` component, it fails to render the image and throws the following behavior in the console: `behavior: The provided src is not valid and want to be resolved`. I've tried using both the direct URL and the same URL wrapped inside a `decodeURIComponent()` function to handle any special characters, but nothing seems to work. Here’s the piece of code I'm using: ```jsx import Image from 'next/image'; const MyComponent = () => { const imageUrl = 'https://my-external-api.com/images/123.svg'; return ( <div> <Image src={imageUrl} alt='Dynamic SVG' width={500} height={500} /> </div> ); }; export default MyComponent; ``` Additionally, I've checked the CORS policy on the API and confirmed that it allows requests from my domain. However, when I inspect the network tab, I see that the image request fails with a status code of 403. I also tried wrapping the `Image` component in a regular `img` tag to see if it’s specific to the Next.js Image component: ```jsx <img src={imageUrl} alt='Dynamic SVG' /> ``` This rendered correctly. Is there something specific I need to do to handle SVGs or dynamic URLs in the Next.js `Image` component, or is there another best practice I should follow in this situation? Any insights would be greatly appreciated! I'm working on a CLI tool that needs to handle this. I'd really appreciate any guidance on this. I'd be grateful for any help. My team is using Javascript for this service. I'm using Javascript stable in this project. I recently upgraded to Javascript 3.11. I've been using Javascript for about a year now. I'm open to any suggestions.