Next.js Image Component Ignoring Custom Loader Function for External Images
I'm converting an old project and I'm stuck on something that should probably be simple... I'm working with an scenario with the Next.js Image component where it's not respecting my custom loader function for external images. I have the following code that attempts to use a custom loader to fetch images from a third-party service, but it seems like Next.js is defaulting to its own loader instead. Here's the setup: ```javascript import Image from 'next/image'; const customLoader = ({ src }) => { return `https://example.com/images/${src}`; }; const MyComponent = () => { return ( <Image loader={customLoader} src="my-image.jpg" alt="My image" width={500} height={300} /> ); }; ``` I expect the image to load from `https://example.com/images/my-image.jpg`, but instead, I see a 404 behavior in the console for a request to `/_next/image?url=my-image.jpg`. I've confirmed that my custom loader is defined correctly, and I've tried using absolute URLs directly in the `src` attribute, but that results in the same scenario. Additionally, I've checked the Next.js version, which is 12.3.0, and I've also ensured that the `next.config.js` file does not have any custom settings that would override the loader. I've tried searching for similar issues on StackOverflow but haven't found a solution. Could there be any other configurations or best practices that I might be missing to get my custom loader to work effectively with external images? For context: I'm using Javascript on macOS. Am I missing something obvious? I'm working on a API that needs to handle this. Thanks in advance! Any suggestions would be helpful.