怎么在VSCode里查看图片资源-图片预览与尺寸显示插件教程

VSCode 默认不显示图片像素尺寸和文件大小，因其内置预览仅渲染缩略图、不解析图像头信息；可安装 vscode-image-preview 插件或使用终端 file 命令获取准确数据。

想在 VSCode 里快速看一眼图片的宽高和文件大小？你会发现，无论怎么双击或悬停，编辑器就是不给这些关键信息。这可不是你的问题，而是 VSCode 的设计如此——它的内置图片预览功能，本质上只是个简单的图像渲染器，只负责把图片显示出来，压根不去读取和分析图像文件头里的元数据。

为什么双击图片看不到宽高和大小

当你双击一个 .png 文件，或者在 Markdown 里按住 Ctrl 点击图片链接时，VSCode 调用的其实是 Electron 框架的 WebView 来渲染图像。这个过程就像在浏览器里打开一张图：它只关心如何把像素画出来，至于这张图具体是 1920×1080 还是 2.1 MB，它一概不管。图像格式中记录这些信息的头部数据，比如 PNG 的 IHDR 块、JPEG 的 SOF0 段，预览功能完全忽略。

这就导致了几个很实际的困扰：

• 鼠标悬停在图片上，提示框里只有文件路径，没有尺寸和大小。
• 右键菜单里也找不到类似“属性”或“详细信息”的选项。
• 更迷惑的是，即便你打开一张由高分辨率 TIFF 转换来的巨型 PNG，预览窗也只是按编辑器宽度缩放显示，视觉上根本看不出它原本有多大，对于需要精确尺寸的工作流来说，这几乎毫无参考价值。

用 vscode-image-preview 插件直接显示尺寸

有没有既方便又准确的解决方案？当然有。安装 vscode-image-preview 插件是目前最推荐的方法。它的原理是在前端直接解析图像文件头，不依赖任何外部命令，完全离线工作，并且支持 .png、.jpg、.webp、.svg 等主流格式。

使用起来非常简单：

• 安装插件后，在资源管理器里右键点击图片文件，选择 Open Preview。或者，按下 Ctrl+Shift+P 打开命令面板，输入 Image Preview: Open Preview 并执行。
• 这时弹出的预览窗口，标题栏会直接显示关键信息，格式如：icon.png (48×48, 3.2 KB)，一目了然。
• 插件默认还开启了悬停预览功能：当你在编辑 Markdown 文件，光标停留在像 ./assets/logo.png 这样的图片路径上时，会自动弹出一个浮层，里面不仅显示图片，还附带尺寸和大小。
• 不过需要注意一个细节：为了让悬停预览生效，图片路径必须以 ./ 这样的相对路径开头，并且文件必须真实存在。像 assets/logo.png（缺少 ./）或者网络上的 https:// 链接，这个功能是无法触发的。

终端一行命令快速查尺寸（不用装插件）

如果你只是偶尔需要确认一下图片参数，不想安装额外插件，那么终端命令其实是更直接、更可靠的选择。尤其是当文件很大或者你只需要一个确切数字的时候。

• 打开 VSCode 的集成终端（快捷键 Ctrl+`），运行命令：file image.jpg。系统会直接读取图像文件头，输出信息中通常就包含 1920x1080 这样的尺寸。这个方法速度极快，而且完全安全，不会改动原文件。
• file 命令在 macOS 和 Linux 系统上是自带的。Windows 用户可以通过安装 Git for Windows 或者启用 WSL（Windows Subsystem for Linux）来获得它。
• 如果你需要更详细的信息，比如色彩深度、DPI 等，可以安装 ImageMagick 后使用其 identify 命令：identify -format "%wx%h %b" image.png。
• 但这里有个重要提醒：identify 命令会解码整个图像文件。如果面对一张上百MB的TIFF图片，这个过程可能会卡住甚至导致无响应。因此，对于快速查看基础尺寸的需求，file 命令永远是首选。

别信缩略图的“视觉判断”

最后，必须强调一个常见的认知误区：千万不要用预览窗格里的缩略图视觉大小，来判断图片的实际像素尺寸。缩略图只是渲染结果，经过了缩放以适应编辑器窗口，这与图片本身的像素数据是两码事。

两张在预览里看起来“差不多大”的图片，实际尺寸可能天差地别。比如 1920×1080 和 1920×1079，在肉眼看来几乎没区别，但对于 Webpack 等构建工具中的图片 loader、持续集成（CI）流程中的尺寸断言、或者响应式网页设计中的 CSS 媒体查询来说，这微小的1像素之差，就足以导致构建失败或布局错乱。因此，但凡涉及到需要像素级精确确认的场景，务必依赖插件显示的数值，或者终端命令输出的、来自文件头的真实元数据。