Nextra 3.0 已发布。 阅读更多
文档指南Next.js 图片

Next.js 图片

在 MDX 中使用 Next.js 图片 的标准方法是直接导入组件

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

静态图片

💡

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

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

Markdown
![Hello](/demo.png)

这将加载 public 文件夹内的 demo.png 文件,并自动将其包装在 Next.js <Image> 中。

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

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

Nextra