Skip to content

[Feature] Markdown 内画像の表示(ローカル相対パス画像の配信 + レンダリング) #55

Description

@takeshiD

背景 / 問題

Markdown 内の画像 (![alt](path)) は現状ローカルの相対パス画像を正しく表示できない。

  • HTML レンダラ (crates/mdpeek-render-html) は <img src="{dest_url}"> を dest_url そのままで出力する。
  • サーバ (crates/mdpeek-server) は埋め込み静的アセット (/static/{*path}) しか配信しないため、![](./diagram.png) や ![](images/foo.png) のようなリポジトリ内のローカル画像を配信するルートが存在せず、ブラウザプレビューで画像が壊れる(404)。
  • TUI レンダラ (crates/mdpeek-render-term) は [image: alt] というプレースホルダテキストのみを表示する。

外部 URL (https://…) の画像は <img> がそのままブラウザから取得するため表示可能だが、ローカル画像は表示できない状態。

目的

Markdown 内の画像を、ブラウザプレビューおよび(可能な範囲で)TUI で表示できるようにする。

スコープ / タスク

ブラウザプレビュー(優先)

  • 開いている Markdown ファイルの位置を基準に、相対パス画像を配信するルートを追加(例: /asset/{*path} 等)。
  • パストラバーサル対策(.. や絶対パスでリポジトリ/watch ルート外へ出られないようにする)。
  • 拡張子に応じた Content-Type 付与(png / jpeg / gif / svg / webp など)。SVG はサニタイズ/配信ポリシーを検討。
  • HTML レンダラで相対 dest_url を配信ルート経由の URL に書き換える(外部 URL・data URI はそのまま通す)。
  • ファイル切替(別 worktree/branch のファイルを開いた場合)でも基準ディレクトリが正しく解決されること。

TUI(任意 / follow-up 可)

  • 端末グラフィックス対応(Kitty graphics protocol / Sixel / iTerm2)での画像インライン表示を検討。
  • 非対応端末では現状どおり [image: alt] プレースホルダにフォールバック。

受け入れ条件

  • リポジトリ内の相対パス画像を含む Markdown をブラウザプレビューで開くと画像が表示される。
  • リポジトリ外への相対パス/絶対パス参照は配信されない(404 等)。
  • 外部 URL 画像は従来どおり表示される。

参考

  • crates/mdpeek-render-html/src/lib.rs(Tag::Image の処理、L401 付近)
  • crates/mdpeek-server/src/lib.rs(ルーティング L194 付近 / 静的アセット配信 L618 付近)
  • crates/mdpeek-render-term/src/lib.rs(Tag::Image の処理、L518 付近)

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or request

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions