VSCode可通过内置悬停预览或Image Preview扩展实现本地图片即时查看。需启用“Editor > Hover: Enabled”和“markdown.preview.imagePreview”，路径须为工作区内相对路径，扩展支持HTML/CSS及Base64图像。
如果您在使用 VSCode 编辑器时希望快速查看 Markdown、HTML 或 CSS 文件中引用的本地图片，而无需手动打开文件，VSCode 的 Image Preview 功能可通过悬停实现即时预览。以下是启用与使用该功能的多种方式：
本文运行环境：MacBook Air，macOS Sequoia。
一、启用内置图像悬停预览
VSCode 自 1.80 版本起已集成基础图像悬停预览能力，无需安装扩展，但需确保相关设置开启。该功能依赖编辑器对图像路径的静态解析与本地资源读取权限。
1、打开 VSCode 设置界面，可通过菜单栏「Code」→「Settings」或快捷键 Cmd + , 进入。
2、在搜索框中输入 "image preview"，定位到 "Editor > Hover: Enabled" 选项，确认其已勾选。
3、继续搜索 "markdown.preview.imagePreview"，将该项设为 true（适用于 Markdown 文件）。
4、对于 HTML/CSS 中的 <img> 标签或背景图 URL，确保路径为相对路径且文件实际存在于工作区目录内。
二、安装 Image Preview 扩展增强支持
官方内置预览对非 Markdown 场景支持有限，第三方扩展可覆盖更广的文件类型与路径格式，并支持 Base64 图像解码与缩放操作。
1、点击左侧活动栏中的扩展图标（或按 Cmd + Shift + X）。
2、在扩展市场搜索框中输入 "Image Preview"，选择作者为 kisstkondor33 的同名扩展并点击「Install」。
3、安装完成后重启 VSCode，该扩展会自动激活，无需额外配置即可在支持的图像路径上悬停触发预览。
4、如需自定义行为，可在设置中搜索 "imagepreview"，调整缩放比例、禁用动画或启用右键菜单快捷预览。
三、验证路径有效性以确保预览触发
悬停预览失败通常源于路径解析失败，VSCode 仅对可静态推断的相对路径或 workspace-root 相对路径执行预览，不支持动态拼接或变量插值路径。
1、检查图像路径是否以 ./ 或 ../ 开头，例如 "./assets/logo.png"。
2、确认图像文件真实存在于当前 VSCode 工作区（即打开的文件夹）内，而非外部绝对路径或未纳入工作区的子目录。
3、在 Markdown 中避免使用 HTML 原生 <img src="..."> 写法以外的语法（如自定义 Liquid 模板标签），此类非标准语法无法被解析器识别。
4、若使用 TypeScript/JavaScript 导入图像（如 import icon from './icon.svg'），该路径不会触发悬停预览，因属于运行时模块解析范畴。
