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 时,图片将被视为高优先级,并且会预加载。根据是否是第一屏等因素决定