VSCode双击图片显示乱码是因默认以文本模式打开，需满足三项条件才能预览：远程端安装vscode-image-preview插件、安装file命令、右键选Open Preview而非双击；Live Server下空格路径会导致404，须改用kebab-case命名。
VSCode 里双击图片只显示乱码或十六进制内容，不是你配置错了，是它根本没走图像渲染流程——尤其在远程（SSH/WSL）或 Live Server 场景下，这属于默认行为，不是 bug。
为什么双击图片只显示二进制内容
VSCode 默认把图片当“普通文件”打开，尤其是以下情况会触发纯文本模式：
- 远程连接（Remote-SSH / Remote-WSL）时，
vscode-image-preview插件未在远程端安装，仅本地装无效 - Live Server 启动的 HTML 中引用了含空格的路径（如
src="dark logo.svg"），服务器返回 404，预览模块根本收不到有效响应 - Markdown 文件中用了动态路径、CSS
background-image或未保存的临时路径，Image Preview插件无法解析 - 工作区未以文件夹形式打开（而是单个 .md 文件），导致相对路径
./img/a.png无根目录可依
远程 SSH/WSL 下启用图片预览的硬性条件
必须同时满足三项，缺一不可：
- 在远程终端（Ctrl+`）运行
file image.jpg，若报command not found，先执行sudo apt install file（Ubuntu/Debian）或sudo yum install file（CentOS/RHEL） - 在远程 VSCode 扩展市场中安装
vscode-image-preview（作者：yudai），不是 kisstkondoros 或 SimonSiefke 的同名插件——后者依赖本地 WebView，远程不生效 - 右键资源管理器中的图片 → 选择
Open Preview，而非双击；双击仍可能走默认二进制打开逻辑
Live Server 图片 404 的真实原因与修复
不是路径写错了，是 HTTP 协议拒绝处理未编码空格——file:// 浏览器能“宽容”解析 World Web/logo.png，但 Live Server 严格校验 URL 合法性，直接 404。
- 错误路径示例：
src="../World Web/img/dark logo.svg"—— 目录和文件名中均含空格 - 正确做法：重命名物理路径，统一用
kebab-case，例如world-web/和dark-logo.svg，并同步更新 HTML 中的src - 验证方式：在浏览器开发者工具 Network 标签页查看图片请求，状态码为 404 且请求 URL 中空格未被编码（仍是
%20缺失），即可确认是此问题
悬停预览（hover preview）失效的排查重点
装了插件却悬停不出图，大概率卡在路径解析或设置覆盖上：
- 确保 Markdown 使用标准语法：
，路径必须以./、../或/开头；纯photo.png不识别 - 检查设置中
image-preview.enableHoverPreview是否为true，且未被工作区设置覆盖 - 禁用可能劫持 hover 的插件，如
Markdown All in One、Paste Image，它们常拦截事件导致Image Preview无响应 - 必须通过
File > Open Folder…打开整个项目，否则插件无法确定路径根目录，相对路径全部失效
最易被忽略的是：远程预览缩放只响应插件内置按钮或 Ctrl+滚轮，editor.mouseWheelZoom 完全无效；而 Live Server 下哪怕路径全对，只要文件系统里存在一个空格，就注定 404——它不报错，只静默失败。
