冠军资讯
加班到秃头最近在使用 VSCode 编辑 Markdown 文档时，遇到了 VSCode 加载图片出错 的问题，图片显示为小方块或者直接不显示，严重影响了文档的阅读体验。相信不少同学也遇到过类似的情况，今天就来分享一下解决思路和经验。
问题场景
- 相对路径引用问题： 在 Markdown 中使用相对路径引用图片，但是 VSCode 的工作目录与图片路径不匹配，导致无法正确加载。
- 网络图片链接问题： 使用网络图片链接，但是网络不稳定或者图片服务器挂了，导致无法加载。
- VSCode 配置问题： VSCode 某些配置项影响了图片的加载。
- Markdown 插件冲突： 安装的 Markdown 插件之间存在冲突，导致图片无法正常显示。
底层原理深度剖析
VSCode 加载图片的原理其实很简单，就是通过 HTML 的 <img> 标签来显示图片。当 VSCode 解析 Markdown 文档时，会将 Markdown 语法转换为 HTML，然后通过浏览器引擎渲染 HTML。因此，图片能否正常显示，取决于以下几个因素：
- 图片路径是否正确： 如果图片路径不正确，浏览器引擎就无法找到图片，导致无法显示。
- 图片格式是否支持： 浏览器引擎需要支持图片格式才能正常显示，常见的图片格式包括 JPEG、PNG、GIF 等。
- 网络连接是否正常： 如果是网络图片，需要保证网络连接正常，才能从服务器下载图片并显示。
- 是否存在安全限制： 有些情况下，浏览器会因为安全原因阻止加载某些图片，例如跨域图片。
代码/配置解决方案
1. 调整 VSCode 工作目录
确保 VSCode 的工作目录与 Markdown 文档的根目录一致。可以通过以下步骤调整工作目录：
- 打开 VSCode 的设置（File -> Preferences -> Settings）。
- 搜索
workspace trust，确保信任当前工作区。 - 确保 Markdown 文件和图片文件位于同一项目目录下。
2. 使用绝对路径或正确的相对路径
尽量使用绝对路径或正确的相对路径来引用图片。如果使用相对路径，建议从 Markdown 文档的根目录开始计算。例如：
 // 使用相对路径
 // 使用绝对路径
3. 配置 VSCode Markdown 渲染
修改 VSCode 的 Markdown 渲染配置，允许加载本地图片。在 VSCode 的 settings.json 文件中添加以下配置：
{
"markdown.preview.html.allowScripts": true,
"markdown.preview.html.allowInsecureContent": true
}
注意： 启用 allowInsecureContent 可能会存在安全风险，请谨慎使用。
4. 检查 Markdown 插件冲突
如果安装了多个 Markdown 插件，可能会存在冲突。可以尝试禁用一些插件，然后重新加载图片，看看是否能够解决问题。
5. 使用网络图片时确保链接可用
使用网络图片时，需要确保链接可用，并且图片服务器没有挂掉。可以使用 curl 命令或者浏览器开发者工具来检查网络链接是否正常。如果网络不稳定，可以考虑将图片上传到 CDN 或者对象存储服务，例如阿里云 OSS、腾讯云 COS，并使用 CDN 加速。
6. 本地搭建图床
可以使用 PicGo + GitHub/Gitee 搭建个人图床，方便管理和使用图片。配合 VSCode 插件，可以实现一键上传图片到图床，然后自动生成 Markdown 链接。
实战避坑经验总结
- 路径问题是罪魁祸首： 90% 的图片加载问题都是由于路径问题引起的，一定要仔细检查路径是否正确。
- 善用 VSCode 调试工具： 可以使用 VSCode 的调试工具来检查图片加载过程，例如查看 HTML 源码，或者使用开发者工具来查看网络请求。
- 定期更新 VSCode 和插件： 保持 VSCode 和插件的最新版本，可以避免一些已知的 bug。
- 合理使用图床： 如果经常需要在多个地方使用图片，建议搭建一个图床，方便管理和使用。
遇到 VSCode 加载图片出错 问题时，不要慌张，按照上述步骤一步一步排查，相信一定能够解决问题。希望本文对你有所帮助。
