Remark Image

此插件为您的图像元素添加 width 和 height 属性，这对于 Next.js 和其他一些框架的图像优化是必需的。

用法

将其添加到您的 Remark 插件中。

MDX Compiler

import { compile } from '@mdx-js/mdx';
import { remarkImage } from 'fumadocs-core/mdx-plugins';

await compile('...', {
  remarkPlugins: [remarkImage],
});

此插件默认包含在 Fumadocs MDX 中。

支持的：

本地图像
外部 URL
Next.js 静态导入

工作原理

对于 Next.js，它使用 静态导入 来导入本地图像，这支持 Next.js Image 的 placeholder 选项。 Next.js 可以使用其内置图像加载器处理图像导入。

否则，它使用文件系统或 HTTP 请求下载图像并获取其大小。

选项

Prop

Type

示例：使用导入

![Hello](/hello.png)
![Test](https://example.com/image.png)

生成：

import HelloImage from './public/hello.png';

<img alt="Hello" src={HelloImage} />
<img
  alt="Test"
  src="https://example.com/image.png"
  width="1980"
  height="1080"
/>

其中 ./public/hello.png 指向 public 目录中的图像。

示例：不使用导入

对于 Next.js，您可以禁用本地图像的静态导入。

import { remarkImage } from 'fumadocs-core/mdx-plugins';

export default {
  remarkPlugins: [[remarkImage, { useImport: false }]],
};

![Hello](/hello.png)
![Test](https://example.com/image.png)

生成：

<img alt="Hello" src="/hello.png" width="1980" height="1080" />
<img
  alt="Test"
  src="https://example.com/image.png"
  width="1980"
  height="1080"
/>

示例：相对路径

当启用 useImport 时，您可以使用相对路径引用本地图像。

![Hello](./hello.png)

请注意，在禁用 useImport 的情况下使用它 不起作用。 Next.js 不会将图像添加到 public 资源中，除非您在代码中导入了它。对于 public 目录中的图像，您可以不使用相对路径直接引用它们。

示例：Public 目录

自定义 public 目录的路径

import { remarkImage } from 'fumadocs-core/mdx-plugins';
import path from 'node:path';

export default {
  remarkPlugins: [
    remarkImage,
    {
      publicDir: path.join(process.cwd(), 'dir'),
    },
  ],
};

您也可以传递一个 URL。

import { remarkImage } from 'fumadocs-core/mdx-plugins';

export default {
  remarkPlugins: [
    remarkImage,
    {
      publicDir: 'https://my-cdn.com/images',
    },
  ],
};

用法

工作原理

选项

示例：使用导入

示例：不使用导入

示例：相对路径

示例：Public 目录

On this page