中文文档
Next.js 的 Image 组件

Next.js Image

在 MDX 文件中使用 Next.js 的 Image 组件 (opens in a new tab) 的标准方式 是直接导入(import)该组件。

import Image from 'next/image'
 
<Image src="/demo.png" alt="Hello" width={500} height={500} />

静态图片

💡

该功能默认通过 Nextra 配置中的 staticImage: true 参数 开启。

Nextra 支持使用 Markdown 语法自动优化静态图片导入(import)。 您无需指定图片的宽度和高度, 只需使用 Markdown 的 ![]() 语法即可:

index.mdx
![Hello](/demo.png)

这会加载 public 目录下的 demo.png 文件,并自动 用 Next.js 的 <Image> 组件对其进行封装。

💡

如果不想把图片放到 public 目录下, 也可以使用 ![](../public/demo.png) 语法从相对路径加载图片。

使用 Next.js 的 Image 组件时,不会出现布局偏移, 并且加载图片时默认会显示一个漂亮的模糊图片占位符:

Nextra