next/image

示例

Image 组件

版本历史

版本	改变
`v10.0.5`	添加 `loader` 属性。
`v10.0.1`	添加 `layout` 属性。
`v10.0.0`	添加 `next/image`。

在继续之前，我们建议你首先阅读图片优化章节。

通过 <Image /> 组件可以开启图片优化功能，<Image /> 组件导出（export）自 next/image。

用法

例如，假定有一个包含了以下文件的项目：

pages/index.js
public/me.png

我们可以输出经过优化的图片，如下所示：

import Image from 'next/image'

function Home() {
  return (
    <>
      <h1>My Homepage</h1>
      <Image
        src="/me.png"
        alt="Picture of the author"
        width={500}
        height={500}
      />
      <p>Welcome to my homepage!</p>
    </>
  )
}

export default Home

必须属性

必须为 <Image /> 组件设置以下属性。

src

原图片的路径或 URL。此属性是必须的。

如果使用的是外部 URL，则必须添加到 next.config.js 配置文件中的 domains 配置项中。

width

图片的宽度（以像素为单位）。必须是不带单位的整数。

除非设置了 layout="fill"，否则是必须的。

height

图片的高度（以像素为单位）。必须是不带单位的整数。

除非设置了 layout="fill"，否则是必须的。

可选参数

<Image /> 组件还可以接受以下可选属性。

layout

当视口（viewport）改变尺寸时图片的布局行为。默认为 intrinsic。

当设置为 fixed 时，图片的尺寸不会随着视口的改变而改变（无响应性），类似于原始的 img 元素。

当设置为 intrinsic 时，图片将针对较小的视口按比例缩小尺寸，但对于较大的视口将保持原始尺寸。

当设置为 responsive 时，图片将缩小尺寸以适应较小的视口，并在较大视口时放大尺寸。

当设置为 fill 时，图片会将宽度和高度拉伸到父元素的尺寸，通常与 object-fit 一同使用。

试一试：

loader

一个用于解析 URL 的自定义函数。默认为 next.config.js 中的 images 对象。

loader 是一个接受以下参数并返回一个字符串的函数：

src
width
quality

import Image from 'next/image'

const myLoader = ({ src, width, quality }) => {
  return `https://example.com/${src}?w=${width}&q=${quality || 75}`
}

const MyImage = (props) => {
  return (
    <Image
      loader={myLoader}
      src="/me.png"
      alt="Picture of the author"
      width={500}
      height={500}
    />
  )
}