Image loading issues in Next.js with custom server and high-resolution images
I'm relatively new to this, so bear with me. I'm using Next.js 12 with a custom Express server, and I'm having trouble loading high-resolution images from an external API. The images are retrieved correctly, but they seem to appear blurry or pixelated when rendered on the page, even though they are high-res images. It seems like Next.js is optimizing them, but I want the original resolution to be maintained. I've set up my Next.js Image component as follows: ```javascript import Image from 'next/image'; const MyComponent = () => { return ( <Image src='https://example.com/high-res-image.jpg' alt='High Res Image' width={1920} height={1080} quality={100} unoptimized /> ); }; export default MyComponent; ``` I tried using the `unoptimized` prop, but it doesn’t seem to have made a difference. The images still appear to be resized and not at their full resolution. I also checked the network tab, and the images are being loaded correctly without any 404 errors, but the quality is not what I expect. I've also made sure that the external image hosting service supports CORS, but I still get a warning in the console saying "Image with `src` set to an external URL is being optimized". I’m wondering if there are any specific configurations I need to set in `next.config.js` or if there’s something more I should consider regarding external image loading in Next.js. Any help would be greatly appreciated!