🌊

【VSCode】markdownで画像が表示されない件

2023/11/11に公開

現象

ディレクトリ構成

.
├── articles
│   └── test.md
├── images
│   └── test.png

test.mdをプレビューしてローカル画像を表示する場面を想定

画像が表示されるパターン

![](/images/test.png)
![](../images/test.png)

画像が表示されないパターン

![](/Users/XXX/project_dir/images/test.png)

原因

VSCodeのmarkdownプレビュー機能では、

先頭の`/` = プロジェクトルート(`/Users/XXX/project_dir`)

として解釈されているようで、プロジェクト外のパスを参照できないようですね。

なので、プレビューで画像を表示させるには、プロジェクト内に画像を配置して、/ + プロジェクトルートからの相対パスで指定するか、現在のファイルからの相対パスで指定する必要がありそうです。

Discussion