image preview插件仅支持以./开头、实际存在的相对路径图片预览，不解析css/js动态路径、data url或网络地址；需确保路径正确、文件存在、插件启用且兼容vscode 1.70+，并注意悬浮预览的光标位置与文件类型限制。
Image Preview插件不显示预览，先检查文件路径是否合法
VSCode的Image Preview插件只对**相对路径正确、且实际存在**的图片生效。它不会解析CSS里的url()或JS中拼接的路径，也不支持data: URL或网络地址（如https://）。
常见错误现象：写成了（缺./），或路径里有中文/空格但没编码；又或者图片文件根本不在工作区目录下。
- 确保Markdown、HTML、CSS等文件中引用图片时用的是
./开头的相对路径 - 右键点击路径 →
Reveal in Explorer，确认文件真实存在且未被Git忽略 - 如果路径含空格，尝试改用短横线命名，避免URL编码问题
侧边栏预览打不开，确认插件已启用且未被其他插件拦截
Image Preview默认不自动打开侧边栏，需手动触发。同时，某些主题或UI增强插件（如Custom CSS and JS Loader）可能干扰其DOM注入逻辑。
使用场景：在Markdown中光标停在行，按Ctrl+Shift+P（Windows/Linux）或Cmd+Shift+P（macOS），输入Image Preview: Toggle Sidebar Preview运行命令。
- 首次使用前，确保插件状态为
Enabled（在扩展面板搜索Image Preview查看） - 禁用近期安装的UI类插件，重启VSCode后测试是否恢复
- 侧边栏预览依赖VSCode 1.70+，旧版本仅支持悬浮预览
悬浮预览失效，重点看光标位置和文件类型
悬浮预览（hover preview）只在特定上下文中激活：光标必须**完全落在图片路径字符串内部**（比如logo.png的任意字符上），且所在文件类型需被插件支持（默认包括.md、.html、.css、.vue等）。
参数差异：image-preview.enableHoverPreview控制开关，默认true；image-preview.maxSize限制预览尺寸（单位KB），超大会静默跳过。
- 不要把光标停在括号或引号上，要落在路径字母/数字内部
- 若在
.js文件里用require('./icon.svg')，默认不触发——需在设置中添加"image-preview.supportedLanguages": ["javascript"] - 大图（如>5MB的PNG）可能因
maxSize限制不显示，可临时调高该值
预览模糊或错位，其实是缩放与DPR适配问题
VSCode渲染预览图时会按编辑器当前缩放级别（zoomLevel）和系统设备像素比（DPR）做缩放，但部分格式（尤其是SVG或高DPI PNG）可能因插件未正确读取原始分辨率而失真。
性能影响：预览大图会短暂卡顿，尤其在远程开发（SSH/WSL）场景下，图像需从远端传输再解码。
- 关闭VSCode的
workbench.zoomLevel（设为0）可消除缩放导致的模糊 - SVG建议用
viewBox而非固定width/height，否则预览易拉伸 - 远程开发时，优先用小尺寸WebP替代PNG/JPEG，减少传输压力
真正麻烦的是多层嵌套路径+符号链接混合的项目结构，插件解析路径时容易误判根目录，这种情况下悬浮和侧栏预览都可能彻底失效——得靠workspaceFolder配置显式指定基准路径。
