VS Code Markdown 预览怎样显示本地图片

VS Code 的 Markdown 预览显示本地图片，关键不是把图片上传到网络，而是让图片路径相对于当前 Markdown 文件能够被解析。最稳妥的写法是把图片放在工作区内，用 ![](images/diagram.png) 这类相对路径引用，再用内置 Markdown 预览确认路径和文件状态。

官方地址：https://code.visualstudio.com/docs/languages/markdown

先把 Markdown 文件和图片放在同一套目录关系里

假设工作区中有 docs/readme.md 和 docs/images/diagram.png，那么 readme.md 应写成：

![架构示意图](images/diagram.png)


这里的文字会出现在图片上方。

如果图片放在 assets/diagram.png，而 Markdown 文件仍在 docs/，就要回到上一级再进入 assets/：

![架构示意图](../assets/diagram.png)


图片路径中的斜杠和文件名大小写都要与工作区实际文件一致。

用内置命令插入图片并打开预览

不想手写路径时，可以在 Markdown 编辑器中使用命令面板的 Markdown: Insert Image from Workspace，让编辑器生成图片语法。插入后重点看括号里的路径是否仍然是工作区内的相对路径，而不是临时文件或不完整的绝对路径。

打开 .md 文件后，可以按 Windows/Linux 的 Ctrl+Shift+V 或 macOS 的 ⇧⌘V 打开预览；需要并排查看源文件和效果时，使用 Ctrl+K V 或 macOS 的 ⌘K V。右键编辑器标签页选择打开预览，也能达到相同目的。

看懂预览安全提示，不要把它当成路径错误

VS Code 会限制 Markdown 预览中的脚本和资源加载。官方文档将 Strict 作为默认安全级别，并建议在没有充分理由且不完全信任工作区内容时保持它。这个提示与“图片相对路径写错”不是同一个问题：路径错误是文件找不到，安全提示则是预览策略拒绝某类资源。

如果预览右上角出现安全提示，可以执行 Markdown: Change preview security settings 查看当前选择。Strict 会阻止不安全的 HTTP 资源并禁用脚本；Allow insecure content 允许 HTTP 内容但仍禁用脚本；Disable 会进一步放宽限制。只为显示工作区内的 PNG/JPEG 图片时，通常先修正相对路径，不需要改成 Disable。

按这张清单定位本地图片不显示

1. 确认 Markdown 文件已经保存，并确定它的实际目录。
2. 从 Markdown 文件目录出发，逐级核对图片目录；同一工作区根目录并不代表同一相对路径。
3. 核对扩展名和大小写，例如 diagram.png 与 Diagram.PNG 不要混用。
4. 在 Explorer 中确认图片不是失效链接、未保存的临时文件或被忽略后仍不存在的路径。
5. 如果路径确认无误但预览仍提示资源受限，再查看 Markdown 预览安全级别；不要把安全选项当作通用修复按钮。

可以把路径问题压缩成一个判断式：Markdown 文件目录 + 引用路径 = 图片实际文件。等式不成立时改路径；等式成立但仍有安全提示时，再处理预览策略。

相关问题

为什么拖入图片后生成的路径看起来很长？

拖放或粘贴动作会根据当前文件和工作区位置生成链接。先确认它最终指向工作区内的图片，再决定是否手动整理成更短的相对路径。

本地图片能显示，HTTP 图片却不显示怎么办？

这更可能是预览安全级别或资源协议问题。先保持 Strict，确认资源是否有 HTTPS 地址；只有在信任内容且确实需要时，才考虑允许不安全内容。

图片路径必须从工作区根目录开始吗？

不需要。Markdown 链接通常按当前 Markdown 文件的位置解析，使用 images/a.png 或 ../assets/a.png 取决于两者的目录关系。

把本地图片显示问题拆成“路径关系”和“预览安全”两层，通常很快就能定位。先让文件路径指向真实图片，再根据提示判断是否需要调整预览策略，能避免为了一个简单的相对路径错误而扩大安全范围。