[{"data":1,"prerenderedAt":224},["ShallowReactive",2],{"content-/vscode-markdown-preview-setup":3,"all-pages-for-dir":201,"related-/vscode-markdown-preview-setup":202,"og-image-/vscode-markdown-preview-setup":223},{"id":4,"title":5,"body":6,"category":185,"concepts":185,"description":186,"extension":187,"meta":188,"navigation":189,"ogImage":185,"path":190,"project_name":185,"published":191,"publishedAt":192,"seo":193,"source":185,"stem":194,"tags":195,"todo":185,"unpublished":191,"updatedAt":185,"__hash__":200},"pages/2025-11/2025-11-27/vscode-markdown-preview-setup.md","VS CodeのMarkdownプレビューでpublic画像のパスを正しく表示する方法",{"type":7,"value":8,"toc":176},"minimark",[9,13,31,42,45,50,53,57,98,134,137,141,152,155,169,172],[10,11,5],"h1",{"id":12},"vs-codeのmarkdownプレビューでpublic画像のパスを正しく表示する方法",[14,15,16,17,21,22,25,26,30],"p",{},"NuxtやNext.jsなどのフレームワークでは、静的画像（",[18,19,20],"code",{},"public","フォルダ内の画像）を ",[18,23,24],{},"/images/example.png"," のような",[27,28,29],"strong",{},"ルート相対パス","で指定することが一般的です。",[14,32,33,34,37,38,41],{},"しかし、VS Code標準のMarkdownプレビューは、ワークスペースのルート（プロジェクトの根元）を ",[18,35,36],{},"/"," として認識するため、",[18,39,40],{},"apps/web/public"," のようなサブディレクトリにある画像を表示できません。",[14,43,44],{},"これを解決し、エディタ上でも画像を確認できるようにする主な手順をまとめます。",[46,47,49],"h2",{"id":48},"方法1-拡張機能markdown-preview-enhancedを使用する推奨","方法1: 拡張機能「Markdown Preview Enhanced」を使用する（推奨）",[14,51,52],{},"標準のプレビューよりも強力な「Markdown Preview Enhanced」を使用すると、プレビューのルートパスを設定できます。",[54,55,56],"h3",{"id":56},"手順",[58,59,60,68,75],"ol",{},[61,62,63,64,67],"li",{},"VS Codeの拡張機能マーケットプレイスで ",[27,65,66],{},"Markdown Preview Enhanced"," (shd101wyy.markdown-preview-enhanced) をインストールします。",[61,69,70,71,74],{},"Markdownファイルを開き、右上のプレビューボタン（虫眼鏡アイコン）ではなく、",[27,72,73],{},"右クリックメニューから「Markdown Preview Enhanced: Open Preview to the Side」","を選択します。",[61,76,77,78],{},"これだけで表示される場合もありますが、表示されない場合は設定を変更します。\n",[79,80,81,95],"ul",{},[61,82,83,86,87,90,91,94],{},[18,84,85],{},"Ctrl + Shift + P"," (Macは ",[18,88,89],{},"Cmd + Shift + P",") を押し、",[18,92,93],{},"Preferences: Open Settings (JSON)"," を選択します。",[61,96,97],{},"以下の設定を追加します：",[99,100,105],"pre",{"className":101,"code":102,"language":103,"meta":104,"style":104},"language-json shiki shiki-themes vitesse-light vitesse-light","\"markdown-preview-enhanced.imageFolderPath\": \"/apps/web/public\"\n","json","",[18,106,107],{"__ignoreMap":104},[108,109,112,116,120,122,126,128,131],"span",{"class":110,"line":111},"line",1,[108,113,115],{"class":114},"sMJiu","\"",[108,117,119],{"class":118},"sdGka","markdown-preview-enhanced.imageFolderPath",[108,121,115],{"class":114},[108,123,125],{"class":124},"sG7-3",": ",[108,127,115],{"class":114},[108,129,130],{"class":118},"/apps/web/public",[108,132,133],{"class":114},"\"\n",[14,135,136],{},"※ パスはご自身のプロジェクト構成に合わせて調整してください。",[46,138,140],{"id":139},"方法2-vs-code標準プレビューの設定を変更する上級者向け","方法2: VS Code標準プレビューの設定を変更する（上級者向け）",[14,142,143,144,151],{},"標準プレビューを使いたい場合、Markdownのルート設定を変更することは難しいですが、ワークスペースの構成を工夫することで回避できる場合があります。しかし、設定が複雑になるため、基本的には",[27,145,146,147,150],{},"ローカルサーバー（",[18,148,149],{},"npm run dev","）を立ち上げてブラウザで確認する","のが最も確実で手軽な方法です。",[46,153,154],{"id":154},"まとめ",[79,156,157,163],{},[61,158,159,162],{},[27,160,161],{},"手軽さ重視",": ローカルサーバーを立ち上げてブラウザで確認する（設定不要、確実）。",[61,164,165,168],{},[27,166,167],{},"エディタ完結重視",": 「Markdown Preview Enhanced」拡張機能を導入する。",[14,170,171],{},"執筆時の確認作業を効率化したい場合は、方法1の導入を検討してみてください。",[173,174,175],"style",{},"html pre.shiki code .sMJiu, html code.shiki .sMJiu{--shiki-default:#B5695977;--shiki-dark:#B5695977}html pre.shiki code .sdGka, html code.shiki .sdGka{--shiki-default:#B56959;--shiki-dark:#B56959}html pre.shiki code .sG7-3, html code.shiki .sG7-3{--shiki-default:#393A34;--shiki-dark:#393A34}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":104,"searchDepth":177,"depth":177,"links":178},2,[179,183,184],{"id":48,"depth":177,"text":49,"children":180},[181],{"id":56,"depth":182,"text":56},3,{"id":139,"depth":177,"text":140},{"id":154,"depth":177,"text":154},null,"Nuxt/Next.jsプロジェクトなどで、ルート相対パス(/images/...)の画像をVS Code上でプレビューするための設定手順","md",{},true,"/vscode-markdown-preview-setup",false,"2025-11-27T00:00:00.000Z",{"title":5,"description":186},"2025-11/2025-11-27/vscode-markdown-preview-setup",[196,197,198,199],"vscode","markdown","productivity","documentation","MthhrThBStDN9-iyljp2-bXMr-TmKHKwbOEd5t37lGI",[],[203,207,211,215,219],{"title":204,"path":205,"publishedAt":206},"VS Code: Markdownでテキストをハイライト（\u003Cmark>タグ）するスニペット設定","/vscode-markdown-highlight-snippet","2025-11-20T00:00:00.000Z",{"title":208,"path":209,"publishedAt":210},"マークダウン記事の$隣接**が数式化されて崩れる問題を発見、115ファイルの修正を明日に持ち越し","/dollar-sign-math-render-issue-triage","2026-07-16T00:00:00.000Z",{"title":212,"path":213,"publishedAt":214},"@nuxt/content で外部リンクを別タブで開く＋GFM autolinker の二重リンク回避ルールを永続化","/external-link-target-blank-rule","2026-06-06T00:00:00.000Z",{"title":216,"path":217,"publishedAt":218},"高千穂峡貸しボートの研究ノートを、矢印キーで進めるスライド形式UIに変えた","/takachiho-boat-research-slide-ui-2026-05-21","2026-05-21T00:00:00.000Z",{"title":220,"path":221,"publishedAt":222},"yomitoku OCR変換と画像表示改善 - 日本語PDF112ページを3分でMarkdown化する実践記録","/yomitoku-ocr-markdown-conversion-2026-02-07","2026-02-07T00:00:00.000Z","https://log.eurekapu.com/og/blog/vscode-markdown-preview-setup.png?v=2025-11-27T00%3A00%3A00.000Z&title=VS%20Code%E3%81%AEMarkdown%E3%83%97%E3%83%AC%E3%83%93%E3%83%A5%E3%83%BC%E3%81%A7public%E7%94%BB%E5%83%8F%E3%81%AE%E3%83%91%E3%82%B9%E3%82%92%E6%AD%A3%E3%81%97%E3%81%8F%E8%A1%A8%E7%A4%BA%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%95&author=Kei%20Komatsu&sig=f9b0ef2ae568329a",1785654963241]