画像とアセット

プロジェクト全体の静的アセットは public/ ディレクトリに配置し、各ページに特有のファイルは相対パスを使用して参照します。

Public ディレクトリ

public/ 内のファイルは、サイトのルートパスから直接配信されます。

サイトをサブパス（site.base !== '/'）で配信する場合でも、通常、public 内のアセットに対して ctx.withBase() を使用する必要はありません（Methanol がビルド時にパスを自動的に解決します）。

ただし、JavaScript（クライアント専用コンポーネント）内で動的に URL を生成する場合、Vite の開発サーバーにおいてパス解決が不安定になることがあります。その際、ctx.withBase('/...') を使用することが回避策として有効です。

public/
  logo.png
  downloads/
    brochure.pdf

MDX 内での使用例:

![Logo](/logo.png)
[パンフレットをダウンロード](/downloads/brochure.pdf)

ローカルファイル

ページファイルの隣に配置した画像などは、相対パスで直接参照することが可能です。

pages/
  guide/
    writing.mdx
    writing-diagram.png

![Diagram](./writing-diagram.png)

全局スタイルおよびスクリプト

pages/style.css を配置すると、全ページに自動的に適用されます。また、pages/index.js または pages/index.ts は、全ページでモジュールスクリプトとして読み込まれます。

本番ビルドでは、Base Path を考慮した適切な URL で注入されます（ctx.withBase('/style.css') や ctx.withBase('/index.js') に相当）。

<link rel="stylesheet" href="/style.css" />
<script type="module" src="/index.js"></script>