image preview插件启用缩略图预览需安装后在设置中勾选“image preview: show thumbnails in explorer”,并确保路径合法、文件已保存且无程序占用;pdf/svg需专用插件支持。

Image Preview 插件怎么启用缩略图预览
VS Code 默认不显示资源管理器里的图片缩略图,必须装插件。最稳定、适配性最好的是 Image Preview(作者:yummygum),它会在资源管理器中直接渲染 .png、.jpg、.gif、.webp 等常见格式的缩略图,不是靠文件名猜图标。
安装后无需重启,但需确认设置已生效:
- 打开 VS Code 设置(
Ctrl+,),搜索image preview - 勾选
Image Preview: Show Thumbnails In Explorer - 若仍不显示,检查是否被其他插件(如
vscode-icons)覆盖了图标主题——临时禁用图标插件可验证是否冲突
缩略图不刷新或显示空白怎么办
常见原因是文件未保存、路径含中文/空格、或被外部程序独占。缩略图生成依赖文件内容读取,不是简单取文件头。
- 确保图片文件已保存(未保存的临时缓冲区内容不会触发缩略图生成)
- 避免路径含非常规字符:比如
C:\项目\图标测试\logo.png可能失败,改用英文路径测试 - 关闭 Photoshop、Sketch、Windows 照片查看器等可能锁定文件的程序
- 如果只对某类格式失效(如
.webp),检查插件版本——旧版Image Preview不支持 WebP 解码,需升级到 v1.0.5+
PDF 和 SVG 缩略图为什么不能用 Image Preview
Image Preview 专为位图设计,对 PDF、SVG 这类矢量格式不处理缩略图。它们需要各自专用插件:
- PDF 缩略图 → 装
vscode-pdf,它在资源管理器里显示 PDF 封面图(依赖 PDF.js 渲染第一页) - SVG 缩略图 →
SVG Viewer(作者 cssho)支持在资源管理器中渲染 SVG 预览,但仅限纯 SVG;含<style></style>或 JS 的 SVG 必须走 Live Server - 别混淆
SVG Preview(已停更)和SVG Viewer,后者才支持 VS Code 1.90+ 的新 API
缩略图尺寸和性能怎么调
缩略图太大拖慢资源管理器响应,太小又看不清细节。默认尺寸是 48×48 像素,可通过配置微调:
- 在
settings.json中添加:"imagePreview.thumbnailSize": 64(支持 32–128) - 大尺寸会增加内存占用,尤其打开含上百张图的文件夹时,建议不超过 64
- 禁用缩略图缓存(
"imagePreview.cacheThumbnails": false)可节省磁盘空间,但每次打开都重新解码,适合 SSD 且图少的场景
真正影响体验的不是缩略图本身,而是你有没有意识到:它只对“已知图像格式”生效,不识别自定义扩展名(比如 .icon),要支持就得手动加 "imagePreview.supportedFormats" 配置项。











