Visual Studio Code（VS Code）はプログラミングから文章作成まで幅広く使える便利なエディタです。
特にMarkdown形式でメモを取ったり、ブログ記事を執筆したりする場合、「画像を挿入して表示したい」と思う場面が多いでしょう。しかし、実際に試すと「画像が表示されない」「パスが合っているのに読み込まれない」「HTMLとMarkdownの違いが分からない」など、思わぬトラブルに遭遇することがあります。
本記事では、VS Codeで画像を挿入して正しく表示するための具体的な手順、MarkdownとHTMLでの書き方の違い、よくあるミスの解決方法まで、初心者にもわかりやすく徹底解説します。
今日からあなたのVS Codeでの作業効率が大きくUPするはずです。
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のプレビューでは表示されるのに、GitHubでは表示されないことがあります。
この場合もほとんどは パスのミスが原因です。
GitHubでは / でのパス区切りが必須なので、パスがWindows形式（\）になっていないか注意しましょう。
VS CodeはHTMLで画像を埋め込む際にも便利に使えます。
HTMLでは <img> タグを使います。
<img src="images/sample.png" alt="サンプル画像">
<img src="images/sample.png" alt="サンプル" width="300">
HTMLでは Emmet が使えるので、img と入力 → Tab キーを押すだけで自動的に次のように展開されます。
<img src="" alt="">
ここに画像パスを入れればOKです。
VS Code拡張機能「Live Server」を使えば、HTMLを保存するたびにブラウザへ即時反映されます。
使い方
これで画像表示の確認が格段に楽になります。
画像が表示されないときの代表的な原因と解決策をまとめました。
最も多いパターンです。
チェックポイント
例：
こういったファイルはパスの解釈が崩れることがあります。
英数字のみ（sample.png）の命名を推奨します。
Markdown previewの拡張機能が画像表示に影響する場合があります。
何かおかしいときは、いったん拡張機能を無効化して確認しましょう。
画像フォルダを後から移動したときは、Markdown/HTML側のパスも書き換えが必要です。
画像を多く使うプロジェクトでは、フォルダ管理が非常に重要です。
MarkdownやHTMLで画像を使う場合は、
プロジェクト内に images フォルダを作って一元管理するのが王道です。
理由
例：
images/
├ icon/
├ banner/
├ photo/
└ screenshot/
案件が大きくなるほど、こうした整理が効きます。
VS Codeではフォルダに画像をドラッグ＆ドロップするだけで追加可能。
追加後、右クリック → 「パスをコピー」すればすぐ挿入できます。
Markdown記事をよく書く人には、画像挿入を手軽にする便利な拡張機能があります。
クリップボードの画像をそのままMarkdownへ貼り付けられます。
使い方
./images/ に保存され、Markdownへ貼り付けられる例：
作業効率が一気に上がるため、ブログ記事作成やドキュメント作成に最適です。
VS Codeで画像を挿入して表示する方法を解説しました。
Markdown・HTMLどちらも簡単な構文で扱えるため、画像を使うプロジェクトと相性抜群です。
本記事のポイント
 を使う<img> タグを使用画像表示を正しく理解すれば、ブログ執筆、資料作成、開発ドキュメントなど、VS Codeでの作業が一段と快適になります。
ぜひ今日から試してみてください。