备注图片

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

🌐 This plugin adds width and height attributes to your image elements, which is needed for Image Optimization on Next.js and some other frameworks.

使用

🌐 Usage

将它添加到你的 Remark 插件中。

🌐 Add it to your Remark plugins.

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

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

支持：

🌐 Supported:

• 本地图片
• 外部网址
• Next.js 静态导入

它是如何工作的

🌐 How It Works

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

🌐 For Next.js, it uses static imports to import local images, which supports the placeholder option of Next.js Image. Next.js can handle image imports with its built-in image loader.

否则，它会使用文件系统或 HTTP 请求来下载图片并获取其尺寸。

🌐 Otherwise, it uses the file system or an HTTP request to download the image and obtain its size.

选项

🌐 Options

示例：带有导入

🌐 Example: With Imports

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

产量：

🌐 Yields:

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 指向公共目录中的图片。

🌐 Where ./public/hello.png points to the image in public directory.

示例：不使用导入

🌐 Example: Without Imports

对于 Next.js，你可以在本地图片上禁用静态导入。

🌐 For Next.js, you can disable static imports on local images.

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

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

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

产量：

🌐 Yields:

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

示例：相对路径

🌐 Example: Relative Paths

启用 useImport 后，你可以使用相对路径引用本地图片。

🌐 When useImport is enabled, you can reference local images using relative paths.

![Hello](./hello.png)

注意，禁用 useImport 使用它是 无法工作的。 除非你在代码中导入了图片，否则 Next.js 不会将其添加到公共资源中。 对于 public 目录中的图片，你可以直接引用它们，而无需使用相对路径。

🌐 Be careful that using it with useImport disabled doesn't work. Next.js will not add the image to public assets unless you have imported it in code. For images in public directory, you can just reference them without relative paths.

示例：公共目录

🌐 Example: Public Directory

自定义公共目录的路径

🌐 Customise the path of public directory

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

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

你也可以传递一个网址。

🌐 You can pass a URL too.

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

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