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