Markdown（md）ファイルを使ってドキュメントやブログ記事、技術メモを書く人にとって、「画像を入れる方法」は必須のスキルです。特にVisual Studio Code（VS Code）では、画像の貼り付け方やパスの指定方法を理解しておくと、きれいで読みやすい記事がスムーズに作成できます。しかし、「相対パスと絶対パスの違いがわからない」「ドラッグ＆ドロップするとどうなる？」「画像が表示されない原因が知りたい」など、初心者がつまずきやすいポイントも多いです。
この記事では、VS CodeでMarkdownファイルに画像を挿入する方法を、基本から応用までくわしく解説します。画像の挿入方法、フォルダ構成、便利な拡張機能、表示されないときのチェックポイントまでまとめているので、この記事だけで画像挿入の悩みが解消できます。
VS CodeでMarkdownに画像を挿入する基本構文
Markdownで画像を表示する基本構文はとてもシンプルです。
- 代替テキスト（alt）：画像が表示できないときの説明。SEOにも有効
- パス：ローカルファイルでもURLでもOK
例：
基本的にはこの1行だけで画像を表示できます。
VS Codeのプレビュー機能（Ctrl + Shift + V）を使うと、実際の表示を確認しながら編集できます。
ローカル画像をMarkdownに挿入する方法（最も一般的）
Markdownでは、プロジェクト内に保存した画像を相対パスで指定するケースが最も多いです。手順をまとめると次の通りです。
【1. 画像ファイルをプロジェクト内のフォルダへ配置する】
例として以下のようなフォルダ構成にします。
project/
├── article.md
└── images/
└── sample.png
Markdownファイルと同じ階層に images フォルダを作ると扱いやすいです。
【2. Markdownに相対パスで記述する】
相対パスは md ファイルの場所を基準にするため、
./images/xxx.png→ 同階層の「imagesフォルダ」の画像../images/xxx.png→ 1つ上の階層の images フォルダ
など自由に指定できます。
【3. プレビューで表示確認する】
Ctrl + Shift + V でMarkdownプレビューを開き、画像が表示されているか確認します。
ドラッグ＆ドロップで自動挿入する方法（VS Code標準）
VS Codeでは、画像ファイルをMarkdownファイルへドラッグ＆ドロップするだけで、Markdown用の画像リンクを自動生成してくれます。
▼ 手順
- エクスプローラーで
image.pngを選ぶ - mdファイルの編集画面へドラッグ
- 自動で以下のMarkdown構文が挿入される
例：
ただし、この方法では画像を現在のmdファイルと同じ階層にコピーしてしまうため、
- 画像が増えるとフォルダが散らかる
- プロジェクトが大きい場合に管理しづらい
といったデメリットがあります。
後述の「拡張機能を使う方法」を使うと、ドラッグ＆ドロップでも自動で images フォルダに保存させることができます。
クリップボードから画像を貼り付ける方法（拡張機能が便利）
Markdownの強力な拡張機能である 「Paste Image」 を使うと、
- Print Screen で撮影
- Snipping Toolで切り取り
- クリップボードにコピーした画像
これらを Ctrl + Alt + V で即貼り付けできます。
▼ Paste Image を導入する方法
- VS Code の拡張機能（Ctrl+Shift+X）を開く
- 「Paste Image」と検索
- インストールする
▼ 主な便利機能
① 任意のフォルダへ自動保存
設定で以下のように images フォルダへ画像を保存させられます。
"pasteImage.path": "${currentFileDir}/images"
② ファイル名を自動生成
prefix + 日付 など好きな命名規則を設定できます。
"pasteImage.defaultName": "img_${currentFileName}"
③ Markdownへのリンクも自動挿入
例：
キーボード1つで画像が整然と管理されるので、記事作成が劇的に楽になります。
絶対パスと相対パスの違い｜画像が表示されない原因の多くはここ
Markdownで画像が表示されない原因の9割は パスの指定ミス です。
▼ 相対パス（おすすめ）
mdファイルを基準に画像の場所を指定します。
例：
./images/photo.png
メリット：
- プロジェクトを別PCに移動しても崩れない
- GitHubに公開してもそのまま表示可能
- Web記事化する際にも流用しやすい
▼ 絶対パス（非推奨）
C:/Users/xxx/Desktop/photo.png
- Windows固有のパス
- 他のPCでは表示されない
- GitHubでは当然表示されない
Markdown記事を配布・共有するなら 相対パス一択 です。
VS Codeで画像が表示されないときのチェックポイント
Markdown初心者がよく遭遇する「表示されない問題」を解決するチェックリストです。
① パスの綴りが正しいか？
- 大文字・小文字が異なる
- 拡張子
.pngが.PNGになっている /と\を間違えている
② フォルダ構成が変わっていないか？
画像を移動すると相対パスが変わります。
③ 画像ファイルが壊れていないか？
サイズ0のファイルは表示されません。
④ VS Codeのプレビュー設定が正しいか？
プレビューが有効か確かめます。
⑤ GitHubで表示されない場合
- パスの大文字小文字
- 日本語ファイル名（URLエンコード問題）
英数字のみの命名を推奨します。
ブログやドキュメントで役立つMarkdownの画像応用テクニック
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/
用途別にフォルダを分けると後から探しやすくなります。
実務でよく使うMarkdown画像挿入のテンプレート集
① 通常の画像
② 画面キャプチャの説明付き
③ ブログ向けHTML併用
<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で図解を自動生成する方法」など応用記事も作成できますので、気軽にご依頼ください！