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 组件时,不会出现布局偏移, 并且加载图片时默认会显示一个漂亮的模糊图片占位符: