Next.js Image Component scenarios to Render Images with Custom Loader Returning 404 Status
I'm reviewing some code and I've been banging my head against this for hours... I'm working with an scenario where the Next.js `Image` component is not displaying images when using a custom loader function. My custom loader fetches images from an external API, and I suspect there might be a question with the URL construction. The images are supposed to be served by a CDN endpoint, but when I try to access them, I receive a `404 Not Found` behavior. Here's the code I have for the loader: ```javascript const customLoader = ({ src, width, quality }) => { return `https://my-cdn.example.com/${src}?w=${width}&q=${quality || 75}`; }; ``` And here’s how I’m using the component: ```javascript <Image loader={customLoader} src="image-path/image.jpg" alt="Example Image" width={500} height={300} /> ``` I have verified that the base URL is correct and should serve the images correctly. However, when I inspect the network requests, I see that the constructed URL is `https://my-cdn.example.com/image-path/image.jpg?w=500&q=75` and this returns a 404 behavior in the browser. I've tried hardcoding the image URL directly into the `src` prop, and that works fine, so it seems to be an scenario with the way the loader processes the path. I've also checked that the `src` being passed to the loader is correct by logging it out. What could be causing the `404 Not Found` scenario? Is there something in the way I'm constructing the image URL that might be off, or could it be related to how Next.js handles the loader function? Any insights would be helpful! My development environment is Windows. Am I missing something obvious? I'm working on a desktop app that needs to handle this. I'm open to any suggestions.