Image 组件

值得注意 : 如果您使用的是 Next.js 13 之前的版本，您需要参考 next/legacy/image 文档，因为该组件已被重命名。

本 API 参考文档将帮助您了解如何使用 props 和配置选项来配置 Image 组件。有关功能和用法，请参阅 Image 组件页面。

// app/page.js
import Image from 'next/image';

export default function Page() {
  return (
    <Image
      src="/profile.png"
      width={500}
      height={500}
      alt="作者的照片"
    />
  );
}

Props

以下是 Image 组件的属性摘要：

属性	示例	类型	状态
`src`	`src="/profile.png"`	字符串	必需
`width`	`width={500}`	整数（px）	必需
`height`	`height={500}`	整数（px）	必需
`alt`	`alt="作者的照片"`	字符串	必需
`loader`	`loader={imageLoader}`	函数	-
`fill`	`fill={true}`	布尔值	-
`sizes`	`sizes="(max-width: 768px) 100vw, 33vw"`	字符串	-
`quality`	`quality={80}`	整数（1-100）	-
`priority`	`priority={true}`	布尔值	-
`placeholder`	`placeholder="blur"`	字符串	-
`style`	`style={{objectFit: "contain"}}`	对象	-
`onLoadingComplete`	`onLoadingComplete={img => done())}`	函数	已弃用
`onLoad`	`onLoad={event => done())}`	函数	-
`onError`	`onError(event => fail()}`	函数	-
`loading`	`loading="lazy"`	字符串	-
`blurDataURL`	`blurDataURL="data:image/jpeg..."`	字符串	-
`overrideSrc`	`overrideSrc="/seo.png"`	字符串	-

关于更多

如果你想要了解更多可以去官方文档详细参阅

<Image>

Props

关于更多