nextjs之next/image的使用技巧

next/image是 Next.js 提供的一个用于优化图像加载和显示的组件。可以自动处理图像的尺寸、格式和加载优化（预加载），提升网页的性能和用户体验。

如下示例

import Image from 'next/image';

export default function MyImageComponent() {
  return (
    <div>
      <Image
        src="/path/to/your/image.jpg"
        alt="Description of the image"
        width={500}
        height={300}
        layout="responsive"
        placeholder="blur"
        priority
      />
    </div>
  );
}

src

 必须是以下之一：

静态导入的图像文件

强烈推荐。使用import这种方式，可以不写width和height，并且会根据图片的在界面中的位置按顺序加载。配合layout="responsive"可以实现原比例放大缩小且不失真，如果使用placeholder="blur"可以不用设置blurDataURL。

路径字符串

这可以是一个绝对的外部URL，也可以是一个内部路径，具体取决于加载器属性或加载器配置。这种方式必须写width和height。 如果使用的是外部 URL，则必须添将 domains 添加到 next.config.js 配置文件中。

layout

当设置为 responsive 时，图像将缩小尺寸以获得较小的视口。推荐

placeholder

当 blur 时， blurDataURL 属性将用作占位符。如果 src 是来自静态导入的对象，并且导入的图像是 .jpg 、 .png 、 .webp 或 .avif ，则会自动填充 blurDataURL。推荐

priority

当设置为 true 时，图片将被视为高优先级，并且会预加载。根据是否是第一屏等因素决定