Next.js Image

在 MDX 中使用 Next.js Image 的标准方式是直接导入组件：

MDX


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

静态图片

Note

此功能默认通过 Nextra 配置中的 staticImage: true 启用。

Nextra 支持使用 Markdown 语法自动优化你的静态图片导入。你不需要指定图片的宽度和高度，只需使用 ![]() Markdown 语法：

Markdown


![Hello](/demo.png)

这将加载 public 文件夹中的 demo.png 文件，并自动用 Next.js 的 <Image> 包装它。

💡

Tip

如果你不想通过 public 托管图片，也可以使用 ![](../public/demo.png) 从相对路径加载图片。

使用 Next.js Image，加载图片时不会出现布局偏移，并且默认会显示一个美观的模糊占位符：

Nextra

图片缩放

Note

图片缩放功能默认全局启用。

在默认配置中，如果你想使用此功能，只需使用 ![]() Markdown 语法插入图片即可。

禁用图片缩放

对于 nextra-docs-theme 和 nextra-blog-theme，你可以通过替换 MDX 中使用的 img 组件来禁用图片缩放。

theme.config.jsx


import { Image } from 'nextra/components'
 
export default {
  // ... your other configurations
  components: {
    img: props => <Image {...props} />
  }
}

为特定图片启用/禁用缩放

当缩放功能全局禁用，但你想为特定图片启用它时，可以使用 <ImageZoom> 组件：


import { ImageZoom } from 'nextra/components'
 
<ImageZoom src="/demo.png" />

当缩放功能全局启用，但你想为特定图片禁用缩放时，可以直接使用 <Image> 组件：


import { Image } from 'nextra/components'
 
<Image src="/demo.png" />