VSCode支持图片内联预览,可通过双击打开、命令面板调用、安装Image Preview扩展或配置files.associations设置实现,默认启用需添加对应格式映射。

如果您在使用 VSCode 编辑代码或文档时,希望直接在编辑器内查看图片文件内容而非依赖外部程序打开,则可能是由于未启用或未正确配置图片预览功能。以下是实现此功能的多种方法:
本文运行环境:MacBook Air,macOS Sequoia。
一、启用内置图片预览功能
VSCode 自 1.80 版本起默认支持常见图片格式(如 PNG、JPEG、GIF、SVG)的内联预览,无需插件,但需确保文件以正确方式打开。
1、在资源管理器中双击目标图片文件(例如 logo.png)。
2、确认该文件在编辑器主区域以只读形式打开,并显示缩略图与尺寸信息。
3、若仅显示二进制内容,请右键点击编辑器标签页,选择Reopen with Editor,再选择Image Preview。
二、通过命令面板触发预览
当图片处于未激活状态或被其他编辑器模式占用时,可通过命令面板强制调用图像预览模块。
1、按下 Cmd+Shift+P(macOS)或 Ctrl+Shift+P(Windows/Linux)打开命令面板。
2、输入并选择Open Preview to the Side。
3、确认当前活动编辑器中已打开图片文件,否则命令将不可用或提示无有效目标。
三、安装 Image Preview 扩展(第三方)
部分用户需要更丰富的交互能力(如缩放、旋转、导出),可借助社区扩展增强原生功能。
1、点击左侧活动栏的扩展图标(四个方块组成的图标)。
2、在搜索框中输入Image Preview,找到作者为 kisstkondoros 的扩展。
3、点击Install 按钮完成安装,无需重启即可生效。
四、调整设置以默认启用图片预览
避免每次手动切换编辑器模式,可通过修改用户设置使图片文件自动以预览方式打开。
1、打开设置界面(Cmd+, 或通过菜单 Code > Settings)。
2、搜索关键词files.associations,点击右侧的编辑图标进入 settings.json。
3、添加如下配置项:"*.png": "image", "*.jpg": "image", "*.jpeg": "image", "*.gif": "image", "*.svg": "image"。










