Next.js Image Component implementing Lazy Loading and Image Aspect Ratio Preservation
I'm integrating two systems and I've been banging my head against this for hours... I'm experiencing issues with the `next/image` component while trying to implement lazy loading for images on a blog... I've set up my images to lazy load, but they seem to lose their intended aspect ratios on initial load and occasionally stretch weirdly when scrolling. Here's the code snippet I've been using: ```jsx import Image from 'next/image'; const BlogPost = ({ post }) => { return ( <div> <h1>{post.title}</h1> <Image src={post.imageUrl} alt={post.title} layout='responsive' width={800} height={450} priority={false} loading='lazy' /> <p>{post.content}</p> </div> ); }; export default BlogPost; ``` I've specified the `layout` as 'responsive' and provided the width and height attributes based on the original image dimensions. However, when I test it, especially on mobile devices, the images either appear with unnatural stretching or briefly flash before the correct dimensions are applied, which is quite noticeable, especially on slower networks. Additionally, I noticed in the console the following warning: `Warning: Image with src '...' must use 'layout' or 'objectFit' to maintain aspect ratio`. I tried adding `objectFit='cover'` but got the same behavior. I've also experimented with different image formats like JPG and PNG, but it didn't change the outcome. I'm currently using Next.js 12.2.0. Is there a known scenario or best practice for handling lazy loading with aspect ratio preservation in this scenario? Any insights would be greatly appreciated! This is part of a larger web app I'm building. What am I doing wrong? Could someone point me to the right documentation? Is this even possible?