Next.js Image Component Not Applying Custom Image Loader on Dynamic Routes
Could someone explain I'm stuck on something that should probably be simple... I'm having an scenario with the Next.js Image component where my custom image loader isn't being applied on dynamic routes. I created a custom loader to serve images from a CDN based on the image's width and quality, but it seems to be ignored when I navigate to pages with dynamic routes. For example, on a page at `/products/[id]`, I expect the image to load using my custom loader, but it defaults to the standard behavior, resulting in slower load times. Here’s my loader function: ```javascript const myLoader = ({ src, width, quality }) => { return `https://my-cdn.com/${src}?w=${width}&q=${quality || 75}`; }; ``` And here’s how I’m using the Image component: ```javascript import Image from 'next/image'; const ProductPage = ({ product }) => { return ( <div> <Image loader={myLoader} src={product.image} alt={product.name} width={500} height={500} /> </div> ); }; ``` I’ve verified that `product.image` contains valid paths for the images, and when I test it on static routes, the loader works as expected. I’ve also checked my Next.js version (12.1.0) and the settings in `next.config.js`, but there’s nothing that seems off there. Any ideas why the loader isn’t being applied on dynamic routes? Is there something specific I need to configure or check when using dynamic imports with the Image component? I'm working on a application that needs to handle this. What's the best practice here? The stack includes Javascript and several other technologies.