在vscode中启用image preview扩展可实现图片悬停预览：安装插件→验证路径有效性→调整尺寸与延迟参数→配置非标准路径支持→禁用冲突插件。
如果您在vscode中编辑代码或markdown文件时，希望快速查看图片文件内容而无需切换到外部程序，则可能是由于image preview功能未启用或插件缺失。以下是启用并使用该功能的步骤：
本文运行环境：MacBook Air，macOS Sequoia。
一、安装Image Preview扩展
VSCode默认不内置图片悬停预览功能，需通过第三方扩展实现。Image Preview是GitHub上广受好评的轻量级插件，支持多种图片格式并在编辑器内直接渲染缩略图。
1、打开VSCode，点击左侧活动栏的扩展图标（或按快捷键Cmd+Shift+X）。
2、在搜索框中输入Image Preview，找到作者为kisstkondoros的扩展。
3、点击“安装”按钮，等待扩展下载并自动启用。
二、验证图片路径有效性
悬停预览依赖于图片路径在当前工作区中可被正确解析，相对路径必须基于打开的根文件夹，且文件实际存在。若路径错误或文件被移动，预览将显示空白或报错图标。
1、确保图片文件已保存在项目目录中，例如./assets/logo.png。
2、在Markdown中使用标准语法：；在CSS中使用background: url(./images/bg.jpg)等形式。
3、将鼠标指针悬停在括号内的路径字符串上，等待约300毫秒，预览窗口应自动弹出。
三、调整预览尺寸与延迟参数
Image Preview扩展提供可配置项，用于控制预览图的最大宽度、高度及触发延迟，避免误触发或显示过小影响识别。
1、按下Cmd+, 打开设置界面，在搜索框中输入image preview。
2、找到Image Preview: Max Width，将其值设为500（单位像素）。
3、找到Image Preview: Hover Delay，将其值设为200（单位毫秒）。
四、启用对非标准路径语法的支持
某些前端框架（如Vue、React）中图片路径可能包裹在表达式或变量中，原生Image Preview无法识别。可通过启用实验性匹配规则提升兼容性。
1、进入VSCode命令面板（Cmd+Shift+P），输入并选择Preferences: Open Settings (JSON)。
2、在settings.json中添加如下配置项：
"image-preview.customPatterns": ["\burl\s*\([^)]+\)", "require\s*\([^)]+\)"]
3、保存文件后重启VSCode窗口（Cmd+Shift+P → Developer: Reload Window）。
五、禁用冲突插件以保障稳定性
部分图像处理类扩展（如Paste Image、Auto Rename Tag）可能劫持鼠标悬停事件或覆盖CSS样式，导致预览窗口无法正常渲染或位置偏移。
1、在扩展视图中筛选已启用的插件，查找名称含Paste、Image、Preview等关键词的条目。
2、逐一禁用疑似冲突插件，每次禁用后测试悬停预览是否恢复。
3、确认问题解决后，仅保留Image Preview及必要开发插件，其余可卸载或保持禁用状态。
