nextjs 实现图片懒加载

在 Next.js 中实现图片懒加载可以使用 react-lazyload 库来实现，你可以在页面中使用 LazyLoader 组件，并将图片路径传递给它。如下是一个示例代码：

import LazyLoad from 'react-lazyload';

function MyImageComponent() {
  return (
    <LazyLoad height={200} offset={100}>
      <img src={"/path-to-image.png"} />
    </LazyLoad>
  );
}

上述代码中，可以将 LazyLoad 组件与 img 标签一起使用，并传递 height 和 offset 属性，这些属性可以设置图片的高度和偏移量。在页面滚动时，图片将被加载并显示。