Next.js 图像

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" />