Next.js Image Component Not Rendering with Dynamic Source URL in Edge Cases
I'm working with an scenario with the `next/image` component not rendering images correctly when using dynamic URLs. My app fetches image sources based on user input, and in some cases, this results in a broken image link. For example, when a user inputs a valid URL, it works fine, but if they input a URL with special characters or certain query parameters, the image component fails to load. I have tried sanitizing the URL using `encodeURIComponent`, but it still doesn't resolve the question. Here's the relevant part of my code: ```javascript import Image from 'next/image'; import { useState } from 'react'; const ImageLoader = () => { const [imageUrl, setImageUrl] = useState(''); const handleChange = (e) => { setImageUrl(e.target.value); }; return ( <div> <input type="text" onChange={handleChange} placeholder="Enter image URL" /> {imageUrl && ( <Image src={encodeURIComponent(imageUrl)} // This doesn't seem to work alt="Dynamic image" width={500} height={500} /> )} </div> ); }; export default ImageLoader; ``` When I inspect the image element in the browser, I see that it tries to load the image from an encoded URL, which results in a 404 behavior for some inputs. The behavior I often see in the console is: `Failed to load resource: the server responded with a status of 404 (Not Found)`. I've also checked the browser network tab, and the requests for these problematic URLs return `CORS` errors. Is there a recommended approach to ensure that dynamic URLs work correctly with the Next.js image component? Any insights on handling special characters or CORS issues in this context would be greatly appreciated! For context: I'm using Javascript on macOS. What's the best practice here?