Next.js Image Component Failing to Render PNGs from Public Folder with Custom CDN
I'm working on a personal project and I've been struggling with this for a few days now and could really use some help. I'm having trouble with the Next.js Image component when trying to render PNG images stored in the `public` folder. Specifically, when I use a custom CDN to serve my images, they are not loading. I'm using Next.js version 13.1.1 and have configured my `next.config.js` file as follows: ```javascript module.exports = { images: { domains: ['mycustomcdn.com'], }, }; ``` I expect the images to load without any issues, but I'm seeing an error in the console that says `Failed to load resource: the server responded with a status of 403 (Forbidden)` when I try to access the images. Here’s a code snippet of how I'm using the Image component: ```javascript import Image from 'next/image'; const MyComponent = () => { return ( <div> <Image src="/images/my-image.png" alt="My Image" width={500} height={300} /> </div> ); }; export default MyComponent; ``` I have double-checked that the image path is correct and that the image exists in the `public/images` folder. I’ve also verified that my CDN is correctly set up to serve static assets. When I try to access the image directly via the browser at `http://mycustomcdn.com/images/my-image.png`, I get the same 403 error. I tried clearing the cache and restarting the Next.js server, but the issue persists. Does anyone have insights on what might be causing this problem or how to debug further? This is part of a larger application I'm building. Has anyone else encountered this? For reference, this is a production REST API. Any examples would be super helpful. Any help would be greatly appreciated!