Remark Image

画像要素に width 属性と height 属性を追加する remark プラグインです。これらの属性は、Next.js をはじめとする一部のフレームワークで画像最適化 (Image Optimization) を行うために必要です。

使い方アンカーリンクをコピー

Fumadocs MDX ではデフォルトで有効になっています。オプションは remarkImageOptions で指定できます。オプションは unified と Sätteri のどちらでも共通です。

サポート対象:

• ローカル画像
• 外部 URL
• Next.js の静的インポート

仕組みアンカーリンクをコピー

useImport を使用すると、ローカル画像は静的インポートに変換され、バンドラーで処理されます。Fumadocs MDX では、dynamic コレクションを除いてこの機能が有効です。 Next.js では組み込みの画像ローダーがこれらを処理し、Next.js Image の placeholder オプションにも対応しています。

それ以外の場合は、ファイルシステムまたは HTTP リクエストで画像を取得し、そのサイズを求めます。

オプションアンカーリンクをコピー

例: インポートを含む場合アンカーリンクをコピー

![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 { defineConfig } from 'fumadocs-mdx/config';

export default defineConfig({
  mdxOptions: {
    remarkImageOptions: {
      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 ディレクトリのパスをカスタマイズします。

import { defineConfig } from 'fumadocs-mdx/config';
import path from 'node:path';

export default defineConfig({
  mdxOptions: {
    remarkImageOptions: {
      publicDir: path.join(process.cwd(), 'dir'),
    },
  },
});

publicDir には、https://my-cdn.com/images のようなベース URL も指定できます。