Image Preview插件不显示预览多数因插件未激活或路径不满足条件：需确保文件已保存、光标停在合法相对路径（如./img.png）内部、禁用冲突插件，且路径不能是绝对路径、data URL或JS动态拼接字符串。
Image Preview插件不显示图片预览怎么办
多数情况是插件未正确激活或文件路径不满足触发条件。Image Preview默认只对相对路径的img标签、CSS中的url()、Markdown的![]()及部分内联样式生效，**不会解析绝对路径、data URL或JS动态拼接的字符串**。
检查以下几点：
- 确保文件已保存（未保存的临时编辑内容不触发预览）
- 确认光标停在合法路径上：比如
src="images/logo.png"中的"images/logo.png"部分被完整选中或光标在其内部 - 路径必须是工作区内的相对路径（如
./assets/icon.svg），不能是/static/或https:// - 关闭其他可能冲突的预览类插件（如“Markdown Preview Enhanced”启用了自己的悬停逻辑）
如何让CSS背景图也支持悬停预览
默认情况下，Image Preview仅识别标准background-image: url(...)写法，但对缩写属性background:、带引号/括号嵌套、变量（var(--img-url)）或PostCSS语法无效。
实操建议：
- 坚持用显式写法：
background-image: url(./img/banner.jpg);（注意括号内无引号更稳定） - 避免多值合并：
background: url(...) no-repeat center;→ 拆成单独background-image声明 - SCSS/Sass中若用
#{$var}拼接路径，预览会失效——这类场景建议改用CSS自定义属性+JS控制，或接受无预览 - 如果项目用Vite/Vue CLI等构建工具，且图片经loader处理（如
src/assets/logo.png转为__VUE_PROD_HYDRATION_MISMATCH_DETAILS__），预览必然失败——这是构建时路径重写导致的，非插件问题
悬停显示的尺寸不准或显示为0×0
尺寸读取依赖VSCode底层对文件系统的同步访问，常见于三类情况：图片尚未写入磁盘、路径指向符号链接、或文件权限受限。
具体表现和应对：
- 新建未保存的图片（如粘贴后未Ctrl+S）→ 尺寸显示
0×0→ **务必先保存文件** - 使用Git LFS或网络挂载盘（如Windows映射的NAS路径）→ 读取超时 → 尝试将工作区移到本地NTFS/ext4分区
- 图片被其他程序占用（如Photoshop正在编辑）→ VSCode无法获取元数据 → 关闭占用进程后重新悬停
- SVG文件无明确宽高属性（如纯
<svg><path></path></svg>）→ 显示“auto”或空白 → 属正常行为，插件不解析SVG DOM结构
想预览WebP/AVIF等新格式却看不到
VSCode 1.84+ 原生支持WebP/AVIF悬停预览（无需插件），但Image Preview插件本身**不额外增强格式支持**，它只是复用VSCode的底层渲染能力。所以能否预览，取决于VSCode版本与系统解码器。
验证与处理：
- 升级VSCode到最新稳定版（旧版如1.75对AVIF支持不全）
- Linux用户需确认系统安装了
libavif或libwebp运行时库（Ubuntu/Debian：运行sudo apt install libavif-dev libwebp-dev） - macOS用户若用Homebrew安装的VSCode，需确保Xcode命令行工具已就绪：
xcode-select --install - 遇到
Failed to load image: Unsupported image type错误 → 直接换用VSCode原生预览（删掉Image Preview插件，重启后悬停仍有效）
插件真正不可替代的价值在于CSS/HTML上下文感知和尺寸标注，而不是解码能力。复杂项目里，别为了一个格式兼容性卡住，优先确认VSCode原生能力是否足够。
