VSCode双击图片显示乱码是因默认以二进制模式打开，需右键标签页选“Reopen with Editor→Image Preview”启用预览；若菜单无此选项，则版本低于1.80或后缀不被支持；悬停预览须安装Image Preview插件并开启三项设置，且路径须为带引号的静态相对路径。
VSCode 默认不把图片当图片打开，双击看到乱码或空白页是正常行为——它压根没启用预览模式，不是你路径错了、插件没装对，也不是文件损坏。
双击图片只显示乱码？立刻右键标签页切到 Image Preview
这是最直接、无需插件的解决方式，适用于 VSCode 1.80+ 版本：
- 在资源管理器中双击图片 → 编辑器里出现十六进制乱码或空页
- 右键该标签页 → 选择
Reopen with Editor→ 点击Image Preview - 成功后标题栏会显示
photo.png (Preview)，并渲染缩略图和基础信息（尺寸不显示，这是原生限制） - 如果菜单里没有
Image Preview，说明 VSCode 版本低于 1.80，或后缀不被识别（如.avif、.tiff）
想悬停就看图？必须装插件 + 开三处开关
内置预览只管“打开”，不支持在 Markdown/HTML/CSS 中悬停路径预览。这功能完全依赖 Image Preview 插件（作者 kisstkondor33），且极易因设置错位失效：
- 安装插件后，必须确认三项设置均为
true：workbench.hover.enabled、editor.hover.enabled、image-preview.enableHoverPreview - 路径必须是静态字符串，且以
./或../开头（assets/logo.png不行，"./assets/logo.png"才行） - 光标必须落在路径字符内部（比如停在
l或g上），停在引号、括号、空格上无效 -
data:image/png;base64,...和https://地址不会触发预览
想在行号旁（gutter）显示小图？得手动开开关 + 限定路径格式
默认情况下 Image Preview 插件不会在 gutter 显示图标，这是设计如此，不是 bug：
- 在设置中搜索
imagePreview.showInGutter并设为true，或在settings.json加："imagePreview.showInGutter": true - 仅支持以
./、../或/开头的相对路径（C:\img\test.jpg或https://无效） - 只响应明确指向图片的字符串字面量：HTML 的
src="..."、Markdown 的、CSS 的url("...") - JS/TS 中的
require('./icon.png')或模板字符串`./${name}.png`不触发 - 若已开启却无图标，检查文件是否已保存、gutter 区域右键是否有
Preview image菜单项（有说明插件识别到了路径）
常见失效场景与绕过建议
很多“预览失败”其实不是配置问题，而是 VSCode 的解析逻辑限制：
- 路径含中文或空格但没用引号包裹：
./img/我的图.png失效，必须写成"./img/我的图.png" - SVG 文件会被渲染成位图，不执行 JS，也不读取
width/height属性；内联<svg>标签嵌在 HTML 中时，VSCode 完全不预览 - 大图（如 >5MB PNG）可能因
image-preview.maxSize限制静默跳过，可临时调高该值 - 插件无法处理动态路径：
src={iconPath + '/logo.png'}、import avatar from './avatar.jpg'都不会触发任何预览
真正麻烦的是那些依赖运行时解析的路径，或者带 JS 的 SVG —— VSCode 预览层不执行代码，这类需求只能靠浏览器调试或终端命令（如 identify -format "%wx%h" path.png）补足。
