VSCode默认不启用图片预览，需手动切换编辑器模式、安装Image Preview插件或配置files.associations；双击图片显示乱码时应右键标签页选择Reopen with Editor→Image Preview，悬停预览则须确保workbench.hover.enabled、editor.hover.enabled和image-preview.enableHoverPreview均为true，且路径为静态合法格式。
VSCode 本身不直接渲染图片文件内容，双击打开看到的只是二进制乱码或空白页——这不是你路径写错了，是它默认没启用图片预览模式。必须手动切换编辑器类型，或装插件，或改设置。
双击图片文件后只显示乱码？立刻切到 Image Preview 模式
这是最常被忽略的基础操作：VSCode 内置了图片预览能力，但不会自动激活。只要文件存在、格式合法（.png、.jpg、.svg、.webp），就能用。
- 在资源管理器中双击图片 → 编辑器里出现乱码/空白 → 右键该标签页 → 选择 Reopen with Editor → 在弹出菜单中选
Image Preview - 如果菜单里没有
Image Preview，说明当前 VSCode 版本低于 1.80，或文件后缀未被识别（比如.avif或.tiff不支持） - 成功后，编辑器会显示缩略图、尺寸、文件大小（仅限内置预览；若需精确像素值，得装
vscode-image-preview插件）
想悬停就看图？必须装 Image Preview 插件并开对开关
内置预览只管“打开文件”，不支持在 Markdown/HTML/CSS 里悬停路径预览——这功能完全依赖第三方插件 Image Preview，且极易因设置错位失效。
- 安装插件后，必须确认三项都为 true：
workbench.hover.enabled、editor.hover.enabled、image-preview.enableHoverPreview - 路径必须是静态字符串且以
./或../开头，assets/logo.png或require(icon)都不触发 - 光标要落在路径字符内部（比如
logo.png的l或g上），停在括号、引号或空格上无效 - JS/TS 文件默认不监听，需手动加配置：
"image-preview.supportedLanguages": ["javascript", "typescript"]
侧边栏预览打不开？不是插件坏了，是触发方式不对
Image Preview 插件默认不自动打开侧边栏，它只响应命令调用，而且对 VSCode 版本有硬性要求。
- 快捷键无效？别按 Ctrl+Click —— 正确做法是：光标放在路径内 → 按
Ctrl+Shift+P（Win/Linux）或Cmd+Shift+P（macOS）→ 输入Image Preview: Toggle Sidebar Preview - 命令搜不到？检查插件是否真启用（扩展面板里看右下角是否标“已启用”），禁用再启用一次常能修复初始化失败
- 用了多根工作区？插件默认只认当前文件所在文件夹为根目录，需在
settings.json中加："image-preview.basePath": "${workspaceFolder}" - VSCode 版本低于 1.70？侧边栏预览不可用，只能靠悬浮预览或双击打开
SVG 渲染模糊或只显示源码？别怪插件，是模式选错了
VSCode 内置预览对 SVG 只做 XML 渲染（即显示源码），而 Image Preview 插件虽能渲染图形，但缩放逻辑和系统 DPR 不匹配时容易糊。
- 要真正“所见即所得”渲染 SVG，请换用专精插件
SVG Viewer：双击 SVG 文件自动进入渲染视图，保存即刷新，支持缩放与源码切换 - 若坚持用
Image Preview，避免在高 DPI 屏幕（如 MacBook Retina）上放大编辑器 zoomLevel，否则预览图会被二次拉伸 - 嵌入 HTML 测试更可靠：
<img src="icon.svg">+Live Server插件，在浏览器里看真实渲染效果
最容易被跳过的其实是工作区打开方式：单个文件打开（File > Open File…）会导致所有相对路径解析失败，必须用 File > Open Folder… 打开整个项目根目录。路径、插件、设置、工作区结构，四者缺一不可。
