Next.js Image Component Not Respecting Custom Image Loader with Cloudinary URLs
I'm wondering if anyone has experience with I'm performance testing and I'm stuck trying to I tried several approaches but none seem to work. I'm working on a personal 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 using my custom image loader when trying to load images from Cloudinary. I have defined a custom loader in my component like this: ```javascript import Image from 'next/image'; const myLoader = ({ src, width, quality }) => { return `https://res.cloudinary.com/my-cloud-name/image/upload/c_scale,w_${width},q_${quality}/${src}`; }; const MyImageComponent = () => { return ( <Image loader={myLoader} src="my-image-path.jpg" alt="My Image" width={500} height={300} quality={75} /> ); }; ``` However, I noticed that when I inspect the network calls, the images are being requested directly from the original URL instead of going through my custom loader. I have already tried clearing the cache and ensuring that the path provided to the `src` prop is correct. Additionally, I confirmed that my Next.js version is 12.1.0 since I am trying to leverage the new features. I also checked the Cloudinary account to ensure that the image exists and is publicly accessible. Despite these checks, the images still do not seem to be processed through my custom loader. The browser's console didn't throw any errors. Has anyone else experienced this scenario with the Next.js image component? Are there any specific configurations I might be missing that could cause the custom loader not to be used? My development environment is Linux. Thanks in advance! What's the best practice here? This is part of a larger application I'm building. How would you solve this? Thanks, I really appreciate it! This is my first time working with Javascript LTS. Any help would be greatly appreciated! Any suggestions would be helpful.