Next.js Image Component loading optimization Images in Production Build with Custom Loader
I'm having a hard time understanding I'm deploying to production and I'm following best practices but I'm converting an old project and I'm relatively new to this, so bear with me. Hey everyone, I'm running into an issue that's driving me crazy. I'm experiencing an scenario where images are not loading in the production build of my Next.js application when using the custom loader for the `<Image>` component. In development mode, everything works perfectly, but once I build and serve the application, the images are returning a 404 behavior. Here's a snippet of my code: ```javascript import Image from 'next/image'; const MyComponent = () => { return ( <Image src="/images/myImage.png" alt="My Image" width={500} height={300} loader={({ src }) => `https://mydomain.com/img/${src}`} /> ); }; ``` In my next.config.js, I have configured the asset prefix and base path like so: ```javascript module.exports = { basePath: '/app', assetPrefix: 'https://cdn.mydomain.com', }; ``` When I run `next build` and then `next start`, the images are returning 404s because the URLs seem to be malformed. I've tried changing the loader's URL structure and using absolute paths. I also confirmed that the images are correctly placed in the public directory. The errors in the console are as follows: ``` GET https://mydomain.com/img/images/myImage.png 404 ``` Has anyone encountered a similar scenario with the Next.js Image component and custom loaders? Any pointers would be greatly appreciated! Has anyone else encountered this? This is part of a larger service I'm building. Has anyone else encountered this? I'm using Javascript 3.9 in this project. What am I doing wrong? For reference, this is a production service. What am I doing wrong? I'm working in a Windows 11 environment.