Markdown（md）ファイルを使ってドキュメントやブログ記事、技術メモを書く人にとって、「画像を入れる方法」は必須のスキルです。特にVisual Studio Code（VS Code）では、画像の貼り付け方やパスの指定方法を理解しておくと、きれいで読みやすい記事がスムーズに作成できます。しかし、「相対パスと絶対パスの違いがわからない」「ドラッグ＆ドロップするとどうなる？」「画像が表示されない原因が知りたい」など、初心者がつまずきやすいポイントも多いです。
この記事では、VS CodeでMarkdownファイルに画像を挿入する方法を、基本から応用までくわしく解説します。画像の挿入方法、フォルダ構成、便利な拡張機能、表示されないときのチェックポイントまでまとめているので、この記事だけで画像挿入の悩みが解消できます。
Markdownで画像を表示する基本構文はとてもシンプルです。
例：
基本的にはこの1行だけで画像を表示できます。
VS Codeのプレビュー機能（Ctrl + Shift + V）を使うと、実際の表示を確認しながら編集できます。
Markdownでは、プロジェクト内に保存した画像を相対パスで指定するケースが最も多いです。手順をまとめると次の通りです。
例として以下のようなフォルダ構成にします。
project/
├── article.md
└── images/
└── sample.png
Markdownファイルと同じ階層に images フォルダを作ると扱いやすいです。
相対パスは md ファイルの場所を基準にするため、
./images/xxx.png → 同階層の「imagesフォルダ」の画像../images/xxx.png → 1つ上の階層の images フォルダなど自由に指定できます。
Ctrl + Shift + V でMarkdownプレビューを開き、画像が表示されているか確認します。
VS Codeでは、画像ファイルをMarkdownファイルへドラッグ＆ドロップするだけで、Markdown用の画像リンクを自動生成してくれます。
image.png を選ぶ例：
ただし、この方法では画像を現在のmdファイルと同じ階層にコピーしてしまうため、
といったデメリットがあります。
後述の「拡張機能を使う方法」を使うと、ドラッグ＆ドロップでも自動で images フォルダに保存させることができます。
Markdownの強力な拡張機能である 「Paste Image」 を使うと、
これらを Ctrl + Alt + V で即貼り付けできます。
設定で以下のように images フォルダへ画像を保存させられます。
"pasteImage.path": "${currentFileDir}/images"
prefix + 日付 など好きな命名規則を設定できます。
"pasteImage.defaultName": "img_${currentFileName}"
例：
キーボード1つで画像が整然と管理されるので、記事作成が劇的に楽になります。
Markdownで画像が表示されない原因の9割は パスの指定ミス です。
mdファイルを基準に画像の場所を指定します。
例：
./images/photo.png
メリット：
C:/Users/xxx/Desktop/photo.png
Markdown記事を配布・共有するなら 相対パス一択 です。
Markdown初心者がよく遭遇する「表示されない問題」を解決するチェックリストです。
.png が .PNG になっている/ と \ を間違えている画像を移動すると相対パスが変わります。
サイズ0のファイルは表示されません。
プレビューが有効か確かめます。
英数字のみの命名を推奨します。
Markdownは画像を表示するだけでなく、さまざまな応用ができます。
Markdown単体ではサイズ変更ができないため、HTMLを併用します。
<img src="./images/sample.png" width="400">
SphinxやHugoなどの静的サイトジェネレーターでは、より高度なキャプション設定も可能です。
GitHubやVS CodeではHTML併用が一般的です。
<img src="./images/a.png" width="45%">
<img src="./images/b.png" width="45%">
プロジェクトが大きくなるほど画像管理は重要になります。
project/
├── docs/
│ ├── index.md
│ └── usage.md
└── images/
├── screenshots/
└── diagrams/
用途別にフォルダを分けると後から探しやすくなります。
<p style="text-align:center;">
<img src="./images/hero.png" width="80%">
</p>
VS CodeでMarkdownへ画像を挿入する方法は、基本構文さえ覚えればとても簡単ですが、パスの指定・フォルダ構成・拡張機能の活用を理解することで、作業効率が大幅に向上します。特に、Paste Imageを使ったクリップボードからの画像貼り付けや、相対パスを使った整理された管理方法は、ブログ記事や技術ドキュメントを大量に作成する人にとって必須のテクニックです。画像が表示されないときのチェックポイントを知っておけば、問題解決もスムーズです。VS CodeのMarkdown編集は、画像挿入をマスターすることでさらに快適になります。
必要であれば、「VS Codeで画像を圧縮する方法」「VS Codeで図解を自動生成する方法」など応用記事も作成できますので、気軽にご依頼ください！