Remark Image

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

Add it to your Remark plugins.

MDX Compiler

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

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

This plugin is included by default on Fumadocs MDX.

Supported:

Local Images
External URLs
Next.js static imports

How It Works

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.

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

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"
/>

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

Example: Without Imports

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

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

![Hello](./hello.png)

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',
    },
  ],
};