Lazy Loading Images with the next/future/image Component

Demonstrate the use of next/future/image for lazy loading images automatically with built-in optimization.

import Image from 'next/future/image';

Import the Image component from the 'next/future/image' module, which will be used to handle image loading.

const MyImageComponent = () => (
  <Image
    src='/path-to-your-image.jpg' // Replace with your image path
    alt='Description of the image'
    width={500} // Specify the width of the image
    height={300} // Specify the height of the image
    priority // Optional: if you want to preload the image
    placeholder='blur' // Optional: enables a blurred placeholder
    blurDataURL='data:image/jpeg;base64,...' // Required if placeholder is 'blur', should be a base64 image
  />
);

Create a functional component that returns the Image component with the 'src', 'alt', 'width', and 'height' properties set. You can also set 'priority' for preloading the image and 'placeholder' to specify a blurred placeholder while the image is loading. The 'blurDataURL' should hold a base64-encoded image if the 'placeholder' is set to 'blur'.