小图看看
在编辑器左侧自动显示代码中图片路径的缩略图，鼠标悬停可查看大图预览。
作用与场景
- 自动识别 Markdown、HTML、CSS、Vue、JSX 等文件中的本地/网络图片路径。
- 左侧显示图片缩略图，悬停路径弹出大图，快速确认图片内容。
- 支持相对路径、根相对路径、绝对路径、网络图片和 base64 data URI。
- 支持配置路径别名，适配
@/assets、~ 等项目约定。
使用前提
- VS Code 版本
>= 1.101.0。
- 已安装并启用
随易商店 扩展，用于购买授权。
用法
- 打开包含图片路径的文件。
- 左侧自动显示图片缩略图。
- 鼠标悬停在图片路径上，查看大图预览。
配置
| 配置项 |
说明 |
默认值 |
imagePreview.ignoredFolders |
查找图片时忽略的目录，支持 glob |
["node_modules", ".git", "dist/**", "build/**", ".output/**", "coverage/**"] |
imagePreview.aliasMap |
路径别名映射，最长前缀优先匹配 |
{} |
imagePreview.registrationCode |
购买授权后获得的注册码 |
null |
路径别名示例
{
"imagePreview.aliasMap": {
"@/assets": "./src/assets",
"~": "./src"
}
}
授权
- 未购买可试用 100 次扩展激活。
- 试用次数用完后，缩略图显示为占位图，并提示购买或输入注册码。
- 购买后获得 20 元 / 1 个注册码（半永久授权，重装系统可能导致原注册码失效）。
- 购买后可在
随易商店 点击 本机一键启用，或手动将注册码填入 imagePreview.registrationCode。
常见问题
为什么有些图片不显示？
- 确认路径是否正确，本地文件是否存在。
- 相对路径会按当前文件目录向上查找，但不会自动解析 Vite / webpack / TypeScript 别名。
- 网络图片需要能正常访问，且首次加载需要下载时间。
悬停预览的图片宽度为什么是固定的？
VS Code hover 不支持 CSS 百分比宽度，统一固定为 600px 以保证大图完整显示。
联系我们
- 官方客服微信：
chensuiyime
- 官网地址：
https://yicode.tech
| |
