`<Image>`

布局稳定性：加载图像时布局不会发生偏移。
懒加载，只有当图片进入视口后，图片才会加载。

import Image from 'next/image'
 
export default function Page() {
  return (
    <Image
      src="/profile.png"
      width={500}
      height={500}
      alt="Picture of the author"
    />
  )
}

props

Name	Type	Default	required	Description
src	`string`	-	必填	图像的 URL
width	`number`	-	-	图像的宽度（px）
height	`number`	-	-	图像的高度（px）
alt	`string`	-	-	图像的替代文本
loader	`function`	-	-	自定义加载器
fill	`boolean`	-	-	图像是否应填充容器
sizes	`string`	-	-	图像的尺寸
quality	`number`	-	-	图像质量（1-100）
priority	`boolean`	-	-	图像是否应具有高优先级
placeholder	`string`	-	-	占位符，在图像加载之前显示
style	`object`	-	-	图像的样式
onLoadingComplete	`function`	-	-	图像加载完成时调用
onLoad	`function`	-	-	图像加载时调用
onError	`function`	-	-	图像加载失败时调用
loading	`string`	-	-	图像加载时使用的 HTML 属性
blurDataURL	`string`	-	-	图像的占位符，在图像加载之前显示

<Image>

props​

`<Image>`

props