VSCode中图片预览空白主因是浏览器安全限制file://协议，需用Live Server插件启动HTTP服务；Markdown图片不渲染则因默认禁用本地加载，应确保路径为正斜杠、图片在工作区内并重载预览。
图片路径对了但预览仍是空白
VSCode 本身不运行服务器，直接双击打开 index.html 会走 file:// 协议，而现代浏览器出于安全限制，会阻止该协议下加载本地图片（尤其是跨目录或含空格路径）。这不是你路径写错了，是浏览器“故意不给你看”。
- 用 Live Server 插件右键 → Open with Live Server，让页面跑在
http://127.0.0.1:5500/这类本地服务下，绝大多数图片就能立刻显示 - 别依赖 VSCode 内置的“在浏览器中打开”功能——它本质就是
file://，基本等于放弃调试 - 检查地址栏：如果看到
file:///开头，那 99% 就是这个问题
Markdown 中  不渲染
VSCode 的默认 Markdown 预览默认禁用本地文件加载，尤其当图片路径含 ../ 或在工作区根目录外时，会静默失败，不报错也不显示。
- 确认路径用正斜杠
/，不是反斜杠\（哪怕你在 Windows 上） - 拖拽图片到 .md 编辑器里，VSCode 会自动生成相对路径，比手敲更可靠
- 如果仍不显示，按
Ctrl+Shift+P输入Markdown: Open Preview to the Side，强制唤起新预览窗，再右键预览区 → Reload Preview - 检查设置里有没有开启
markdown.preview.securitySettings.allowUnsafeLinks（不推荐开），更稳妥的是把图片放进工作区目录内，用./images/foo.png这种扁平路径
图片文件存在却提示“找不到”或显示损坏图标
表面是路径问题，实际常是文件权限、编码或格式陷阱。VSCode 不报错，只留一个占位符，让人误以为是 HTML 写错了。
- 在终端里执行
ls -l images/example.jpg（macOS/Linux）或dir images\example.jpg（Windows），确认文件真实存在且大小非零 - 右键图片 → 用系统自带看图软件打开，能打开说明文件完好；打不开就换一张图测试
- 路径里有中文、空格或括号？尝试重命名为
pic1.png并更新 HTML/Markdown 中的引用 - 刚从微信/QQ 下载的图？有些会带隐藏的元数据或不标准编码，用画图工具另存为一次 PNG/JPG 即可解决
Live Server 起来了，图片还是 404
Live Server 默认只服务当前工作区根目录及子目录，如果你的 HTML 在 src/ 里，而图片放在 assets/（与 src/ 同级），那 src/ 里的页面根本“看不见” assets/ —— 它不在服务范围内。
- 把图片统一放到 HTML 所在目录或其子目录下，比如
src/images/ - 或者改用绝对路径引用：
<img src="/assets/logo.png" alt="vscode怎么保存网页图片显示不出来" >，前提是你的项目结构支持这种部署方式（需配合构建工具或手动调整 Live Server 配置） - 检查开发者工具（F12）→ Network 标签页，点图片请求，看 status 是 404 还是 blocked —— 404 是路径错，blocked 是跨域或协议问题
VSCode 显示图片不是“写对就行”，而是“环境 + 路径 + 权限 + 协议”四者咬合的结果。最容易被忽略的，是以为“文件在我电脑上，就一定能被读到”——其实浏览器和插件各自有一套规则，得一个个对齐。
