Next.js Image Optimization scenarios with Custom Loader in Production Build
Quick question that's been bugging me - I'm optimizing some code but I'm running into a question with Next.js image optimization when using a custom loader. My application works fine in development, but when I build for production, images don't display. I've set up a custom loader to fetch images from a third-party CDN. Here’s a snippet of my configuration: ```javascript // next.config.js module.exports = { images: { loader: 'custom', path: 'https://my-cdn.com/images/', }, }; ``` And I'm using the `<Image>` component like this: ```javascript import Image from 'next/image'; const MyComponent = () => { return ( <Image src="example.jpg" alt="Example Image" width={500} height={300} /> ); }; ``` In development mode (`next dev`), everything loads correctly, but after running `next build` and `next start`, the images don’t show up. Instead, I see a broken image icon in the console. There are no errors indicating what went wrong, but the network tab shows a 404 behavior when trying to fetch the images. I've double-checked the URLs and they seem correct. I’ve also tried using the default loader, and that works fine, so it appears to be an scenario with the custom loader. I've checked the Next.js documentation and confirmed that my configuration is according to the guidelines. Is there something I might be overlooking with the way Next.js handles custom loaders in production? Any help would be appreciated! My development environment is Windows 10. Has anyone else encountered this? Is there a simpler solution I'm overlooking?