VSCode默认不渲染图片因其编辑器核心面向文本，将图片视为二进制文件而不调用解码器；需安装Image Preview插件并配置files.associations强制绑定图片格式至previewEditor才能实现预览。
VSCode 默认只把图片当二进制文件处理，不主动渲染——所以你双击一张 .png，看到的是“The file is not displayed in the text editor because it is either binary or uses an unsupported text encoding.”这类提示，不是报错，是它压根没打算打开。
为什么 VSCode 默认不显示图片
VSCode 的编辑器核心设计面向文本：它用文本解析器加载文件，而图片是二进制数据。没有插件介入时，它连“这是张图”都懒得识别，更不会调用图像解码器。这不是 bug，是默认行为。
常见误解是以为“支持 PNG/JPG 就等于能预览”，其实支持格式 ≠ 支持内建预览。原生只提供极简的十六进制视图（右键 → Reveal Binary Content），真正的预览必须靠扩展补全。
装 Image Preview 插件并改默认打开方式
最直接有效的方案是安装 Image Preview（作者：Kisshu）——它轻量、无依赖、适配新版 VSCode（v1.80+），且不 patch 核心文件，避免触发“不受支持的扩展”警告。
- 在扩展面板（
Ctrl+Shift+X）搜Image Preview，安装并重启 - 打开
settings.json（命令面板 →Preferences: Open Settings (JSON)） - 添加这行配置，强制图片用预览模式打开：
"files.associations": { "*.png": "imagePreview.previewEditor", "*.jpg": "imagePreview.previewEditor", "*.jpeg": "imagePreview.previewEditor", "*.gif": "imagePreview.previewEditor", "*.webp": "imagePreview.previewEditor", "*.svg": "imagePreview.previewEditor" } - 注意：不要只写
"*.png": "image"—— 这会走 VSCode 原生（且无效）的图片处理逻辑
路径或权限问题也会伪装成“格式不受支持”
如果你点了图片却弹出相同提示，但其实文件路径含空格、符号链接断裂、或权限被拒，VSCode 有时会统一归类为“不支持”，掩盖真实原因。
- 检查路径：终端里运行
ls -l ./path/to/your.jpg，确认文件存在且权限为-rw-r--r--（即至少可读） - 警惕空格和中文：比如
./assets/my photo.jpg在 Live Server 下大概率 404，在编辑器里也可能加载失败；重命名为my_photo.jpg - 如果是符号链接，确保目标文件可访问：
ls -la ./assets/logo.png看是否指向有效路径 - Linux/macOS 用户若从压缩包解压出图片，偶尔会继承不可读权限，执行
chmod 644 *.png再试
别忽略 SVG 和 WebP 的特殊性
.svg 是文本格式，VSCode 默认用文本编辑器打开；.webp 虽是主流格式，但旧版 Image Preview（v0.x）不支持。这两类容易误判为“VSCode 本就不支持”。
- 对
.svg：确保files.associations中明确绑定到imagePreview.previewEditor，否则它会按 XML 文本打开 - 对
.webp：升级Image Preview到 v1.0.5+（2025 年后发布），低版本即使配置了也会 fallback 到文本编辑器 - 如果仍不行，临时用
SVG Preview（单独支持 SVG）或WebP Viewer作验证，排除是否是单个格式的兼容问题
真正卡住人的往往不是“没装插件”，而是装了插件却没改 files.associations，或者路径里藏着一个看不见的空格。VSCode 不会告诉你“路径错了”，它只会说“格式不受支持”——这句话背后，八成是路径、权限或配置三者之一没对齐。
