VSCode中终端图像支持：不仅仅是文本-VSCode-PHP中文网

VSCode中终端图像支持：不仅仅是文本

P粉986688829

发布： 2025-12-19 19:13:02

原创

409人浏览过

VSCode 1.90+原生支持终端内联图像渲染，需输出标准OSC 1337转义序列；推荐viu工具，注意GPU加速开启、终端类型为integrated、尺寸控制及调试方法。

vscode中终端图像支持：不仅仅是文本

VSCode 1.90 版本起，终端正式支持内联图像渲染——不是靠插件，不是靠 hack，而是原生能力。这意味着你可以在集成终端里直接显示 PNG、JPEG、GIF（静态帧）等常见格式的图片，只要命令输出的是符合标准的 OSC 1337 图像协议的转义序列。

原生支持图像输出的工具仍然有限，但已有几个实用选择：

kitty-imgcat（需在 kitty 终端中运行）：VSCode 终端底层不兼容 kitty 协议，所以它在 VSCode 中不工作；
viu（推荐）：轻量、跨平台、专为终端图像设计，支持缩放、裁剪和透明度，输出标准 OSC 1337 序列，VSCode 原生识别；
chafa：将图像转换为 Unicode/ANSI 色块，不依赖协议，兼容性最好，但属于“字符画”，非真图像渲染；
imgcat（iTerm2 版）：仅限 iTerm2，VSCode 中无效；
自定义脚本：用 Node.js / Python 调用 fs.readFileSync + 手动拼接 OSC 1337 base64 数据，可行但需注意长度限制（单次建议 ≤ 4MB）和换行处理。

图像支持默认开启，但容易被忽略的细节决定成败：

FaceSwapper

FaceSwapper是一款AI在线换脸工具，可以让用户在照片和视频中无缝交换面孔。

960

确保 VSCode 是 1.90+，且系统启用 GPU 加速（Settings > Window > Hardware Acceleration 设为 on）；
终端类型必须是 integrated（非外部终端如 Windows Terminal），且 Shell 无干扰输出（比如某些 zsh 主题会在 prompt 中插入非法转义符，导致图像协议被截断）；
图像尺寸建议控制在 宽度 ≤ 800px，高度 ≤ 600px，过大可能触发渲染截断或内存警告；
若图片不显示，右键终端 → “Toggle Developer Tools” → 查看 Console 是否报 Unsupported image format 或 Invalid OSC sequence，多数是编码错误或 MIME 类型缺失（应为 image/png 等）。

让图像真正融入日常开发流：

在 Markdown 预览中无法嵌图？试试写个简单脚本：echo "![plot](data.png)" | markdown-preview-server，再用 viu data.png 快速验证生成效果；
配合 git diff --no-index 和图像比对工具（如 imgdiff），输出差异图直出终端，省去切窗口；
调试机器学习可视化时，在训练脚本末尾加 viu ./outputs/loss_curve.png，训练完立刻看到结果，无需打开文件夹；
把 viu 封装成 alias：alias preview='viu -w 60% -h 40%'，适配不同屏幕比例。