小图看看

在编辑器左侧自动显示代码中图片路径的缩略图，鼠标悬停可查看大图预览。

作用与场景

• 自动识别 Markdown、HTML、CSS、Vue、JSX 等文件中的本地/网络图片路径。
• 左侧显示图片缩略图，悬停路径弹出大图，快速确认图片内容。
• 支持相对路径、根相对路径、绝对路径、网络图片和 base64 data URI。
• 支持配置路径别名，适配 @/assets、~ 等项目约定。
• 默认跳过 node_modules、dist 等常见依赖与产物目录；超过 5MB 的图片不显示，避免卡顿。

使用前提

• VS Code 版本 >= 1.101.0。

用法

1. 打开包含图片路径的文件。
2. 左侧自动显示图片缩略图。
3. 鼠标悬停在图片路径上，查看大图预览。

配置

路径别名、忽略目录、根相对路径映射等项目相关配置已移至项目配置文件 simg.json（见下文）。

路径别名示例

{
    // simg.json
    "aliasMap": {
        "@/assets": "./src/assets",
        "~": "./src"
    }
}

项目配置文件

在项目根目录放 simg.json，声明本项目相关的配置，解析时从文档目录就近向上查找：

{
    "rootDirs": ["public"],
    "aliasMap": {
        "@/assets": "./src/assets"
    },
    "ignoredDirs": ["custom-dist"]
}

如 Astro/Next/VitePress 项目中 /images/a.png 会被解析到 public/images/a.png。未放置配置文件时，路径别名不可用，忽略目录与根相对路径按内置默认解析（原有行为）。文件在 VS Code 中有自动补全与字段校验；通过悬停建议自动写入时，文件会以标准 JSON 重格式化。

常见问题

为什么有些图片不显示？

• 确认路径是否正确，本地文件是否存在。
• 相对路径会按当前文件目录向上查找，但不会自动解析 Vite / webpack / TypeScript 别名。
• 网络图片需要能正常访问，且首次加载需要下载时间。

悬停预览的尺寸是怎么定的？

按图片原始尺寸等比显示：小图不超过原始尺寸（清晰且完整），大图等比缩放到 600×400 以内，不会再被 hover 高度裁切或放大模糊；解析不出尺寸的图片退回 600px 宽度。预览底部可点击「在编辑器中打开原图」查看细节。

联系我们

• 官方客服微信：chensuiyime
• 官网地址：https://yicode.tech