Next.js 图片
在 MDX 中使用 Next.js 图片 (opens in a new tab) 的标准方式是直接导入组件:
import Image from 'next/image'
<Image src="/demo.png" alt="Hello" width={500} height={500} />
静态图片
💡
此功能默认通过 Nextra 配置中的 staticImage: true
启用。
Nextra 支持使用 Markdown 语法自动优化静态图片导入。您无需指定图片的宽度和高度,只需使用 ![]()
Markdown 语法:
index.mdx
![Hello](/demo.png)
这会加载public
文件夹中的demo.png
文件,并自动使用 Next.js <Image>
将其包装。
💡
如果您不想通过 public
托管图像,还可以使用 ![](../public/demo.png)
从相对路径加载图像。
使用 Next.js 图片,加载图像时不会有布局变化,并且默认情况下会显示一个漂亮的模糊占位符: