Visual Studio Code（VS Code）はプログラミングから文章作成まで幅広く使える便利なエディタです。
特にMarkdown形式でメモを取ったり、ブログ記事を執筆したりする場合、「画像を挿入して表示したい」と思う場面が多いでしょう。しかし、実際に試すと「画像が表示されない」「パスが合っているのに読み込まれない」「HTMLとMarkdownの違いが分からない」など、思わぬトラブルに遭遇することがあります。
本記事では、VS Codeで画像を挿入して正しく表示するための具体的な手順、MarkdownとHTMLでの書き方の違い、よくあるミスの解決方法まで、初心者にもわかりやすく徹底解説します。
今日からあなたのVS Codeでの作業効率が大きくUPするはずです。
VS Codeで画像を挿入する基本方法（Markdown編）
MarkdownはVS Codeととても相性がよく、画像挿入も簡単にできます。
まずはMarkdownでの基本的な挿入方法から紹介します。
● 基本構文
Markdownで画像を挿入する構文は次のとおりです。
例：
「代替テキスト」は、画像が表示できないときに説明として表示される文です。SEO対策としても重要なので、できれば意味のある言葉を入れましょう。
● ローカル画像を表示する場合
ローカルに保存している画像を表示するには、相対パスを使うのがおすすめです。
たとえば、次のようなフォルダ構成だとします。
project/
├ README.md
└ images/
└ sample.png
この場合、Markdown内ではこう書きます。
● 絶対パスではなく相対パスを使う理由
絶対パス（例：C:\Users\…）でも表示されることはありますが、
・別のPCに移動したときに表示できない
・GitHubで確認したときに読み込まれない
などトラブルの元です。
Markdownは相対パスが基本。特にGitHubにアップする可能性がある場合は必ず相対パスを使いましょう。
● 画像が表示されない原因の多くは「パス違い」
VS CodeでMarkdown画像が表示されない原因の8割はパスの指定ミスです。
理由としては――
・フォルダ構造を正しく把握していない
・「./」「../」の使い方を間違えている
・拡張子（.png / .jpg）が違う
などが挙げられます。
パスの確認には VS Code左側のエクスプローラーが非常に役立ちます。
画像ファイルを右クリック → 「パスをコピー」で確実に指定できます。
VS CodeのMarkdownプレビューで画像を確認する方法
画像が正しく表示されるかどうかを確認するには、VS Codeのプレビュー機能が便利です。
● プレビューを開く方法
Markdownファイルを開いた状態で、
- Ctrl + Shift + V
- もしくは右上の「プレビューを開く」アイコンをクリック
これで画面右側にプレビュー画面が表示されます。
● プレビューと実際の表示が違う場合
VS Codeのプレビューでは表示されるのに、GitHubでは表示されないことがあります。
この場合もほとんどは パスのミスが原因です。
GitHubでは / でのパス区切りが必須なので、パスがWindows形式（\）になっていないか注意しましょう。
HTMLファイルで画像を挿入して表示する方法
VS CodeはHTMLで画像を埋め込む際にも便利に使えます。
● HTMLの基本構文
HTMLでは <img> タグを使います。
<img src="images/sample.png" alt="サンプル画像">
● 幅や高さを指定する例
<img src="images/sample.png" alt="サンプル" width="300">
● VS Codeで画像をすばやく挿入する小技
HTMLでは Emmet が使えるので、img と入力 → Tab キーを押すだけで自動的に次のように展開されます。
<img src="" alt="">
ここに画像パスを入れればOKです。
● Live Serverでリアルタイム表示
VS Code拡張機能「Live Server」を使えば、HTMLを保存するたびにブラウザへ即時反映されます。
使い方
- 拡張機能で「Live Server」をインストール
- HTMLファイルを右クリック
- 「Open with Live Server」を選択
これで画像表示の確認が格段に楽になります。
VS Codeで画像が表示されないときのよくある原因と対処法
画像が表示されないときの代表的な原因と解決策をまとめました。
● 原因① パスが間違っている
最も多いパターンです。
チェックポイント
- フォルダ構造と相対パスの位置関係が正しいか
- 大文字と小文字が一致しているか（Linuxでは特に重要）
- 拡張子が正しいか
● 原因② 日本語ファイル名・スペース入りファイル名
例：
- 「画像 1.png」
- 「スクリーンショット（1）.jpg」
こういったファイルはパスの解釈が崩れることがあります。
英数字のみ（sample.png）の命名を推奨します。
● 原因③ 拡張機能の影響
Markdown previewの拡張機能が画像表示に影響する場合があります。
何かおかしいときは、いったん拡張機能を無効化して確認しましょう。
● 原因④ ファイル構造の変更
画像フォルダを後から移動したときは、Markdown/HTML側のパスも書き換えが必要です。
VS Codeで画像フォルダを管理するコツ
画像を多く使うプロジェクトでは、フォルダ管理が非常に重要です。
● ●images フォルダを作るのが基本
MarkdownやHTMLで画像を使う場合は、
プロジェクト内に images フォルダを作って一元管理するのが王道です。
理由
- パスが簡単になる
- GitHubで管理しやすい
- 画像の整理がしやすい
- ファイル構造がシンプルになる
● サブフォルダで分類するのも有効
例：
images/
├ icon/
├ banner/
├ photo/
└ screenshot/
案件が大きくなるほど、こうした整理が効きます。
● VS Codeのドラッグ＆ドロップで一瞬で画像を追加
VS Codeではフォルダに画像をドラッグ＆ドロップするだけで追加可能。
追加後、右クリック → 「パスをコピー」すればすぐ挿入できます。
VS Codeでドラッグ＆ドロップでMarkdownへ画像を挿入できる拡張機能
Markdown記事をよく書く人には、画像挿入を手軽にする便利な拡張機能があります。
● Paste Image
クリップボードの画像をそのままMarkdownへ貼り付けられます。
使い方
- 拡張機能で「Paste Image」をインストール
- PrintScreenなどで画像をコピー
- Markdown内で Ctrl + Alt + V
- 自動で
./images/に保存され、Markdownへ貼り付けられる
例：
作業効率が一気に上がるため、ブログ記事作成やドキュメント作成に最適です。
まとめ｜VS Codeで画像を挿入すれば作業効率が大幅UPする
VS Codeで画像を挿入して表示する方法を解説しました。
Markdown・HTMLどちらも簡単な構文で扱えるため、画像を使うプロジェクトと相性抜群です。
本記事のポイント
- Markdownでは
を使う - パスは相対パスがおすすめ
- VS Codeのプレビューで確認可能
- HTMLでは
<img>タグを使用 - 画像が表示されない原因はほぼ「パスのミス」
- Paste Image などの拡張で作業効率がアップ
- imagesフォルダで一元管理するとトラブルが減る
画像表示を正しく理解すれば、ブログ執筆、資料作成、開発ドキュメントなど、VS Codeでの作業が一段と快適になります。
ぜひ今日から試してみてください。