ImagePreview插件可实现鼠标悬停缩略图预览,需通过Package Control安装,仅支持代码中显式路径如,不支持错误路径fallback,SVG渲染依赖系统WebKit。

怎么让鼠标悬停就弹出图片缩略图
Sublime 本身不渲染图片,但 ImagePreview 插件能模拟 VS Code 的悬停预览行为——这是最接近“所见即所得”的轻量方案。
- 必须用 Package Control 安装:
Ctrl+Shift+P→ 输入Package Control: Install Package→ 搜索并安装ImagePreview - 只对代码中显式写出的路径生效,比如
或background: url(../img/logo.svg) - 不支持相对路径解析错误时的 fallback,如果路径写错(如少个
./),预览直接不出现,也不会报错提示 - SVG 渲染依赖系统 WebKit 支持,部分复杂 SVG(含 JS 或外部引用)可能空白或报错,不是插件问题,是 Sublime 底层限制
双击打开图片文件时别再显示乱码
默认打开 .png 或 .jpg 文件,Sublime 会当成二进制文本读取,满屏十六进制字符。这不是 bug,是设计如此;要让它“像查看器一样打开”,得绕过编辑逻辑,走系统调用。
- 别改
ignored_packages或强行绑定语法高亮——那治标不治本,还可能破坏其他功能 - 真正有效的是配合
OpenImageExternallyCommand这类自定义命令:选中路径 → 运行命令 → 调用webbrowser.open()用系统默认程序打开 - 快捷键建议绑定到
Ctrl+Alt+P(避免和Ctrl+P冲突),并在命令中加路径存在性校验,否则点错位置会静默失败 - 注意 Windows 下路径含空格时,
file://协议需手动urllib.parse.quote()编码,否则浏览器打不开
Markdown 里图片不显示?先查这三个地方
MarkdownPreview 是主流方案,但它不负责加载图片,只负责把 Markdown 转成 HTML 并丢给浏览器——所以图片是否显示,90% 取决于路径、服务策略和安全限制。
intense图片全屏浏览插件(jQuery),当鼠标点击图片时,可以全屏幕浏览图片,移动鼠标可以查看图片不同的部分,适合相册展示图片细节。兼容主流浏览器,php中文网推荐下载! 使用方法: 1、head区域引用文件styles.css及intense.js 2、在文件中加入区域代码 3、复制images文件夹
- 路径必须是相对于当前
.md文件的**正确相对路径**,和在某些配置下行为不同 - 浏览器可能拦截本地
file://协议下的图片请求(尤其 Chrome),解决方法是在插件设置中启用"enable_math": false并开启"enable_highlight": true,强制走内联 base64 渲染(仅限小图) - 如果用
OmniMarkupPreviewer,它默认启用了--allow-file-access-from-files参数,但 macOS 上仍可能被 Gatekeeper 阻止,需手动在终端执行一次open -a "Google Chrome" --args --allow-file-access-from-files
SVG 文件想边改边看效果,别只装一个插件
单独装 SVG Viewer 或 SVG Preview 都不够稳——前者依赖 Sublime 内置 WebView(老旧版本易崩溃),后者依赖本地 HTTP 服务(端口冲突常见)。
- 推荐组合:装
SVG Viewer+SideBarEnhancements,右键 SVG 文件时有两选项:SVG Viewer: Preview(快速内联)和Open With → Firefox(稳定兜底) - 确保语法识别为
SVG而非XML:右下角点击语言名 →Open all with current extension as...→ 选SVG,否则SVG Viewer不响应 - 自动刷新不是默认开启的,要在
Preferences → Package Settings → SVG Viewer → Settings里手动加"auto_reload": true,否则改完保存还得手动按Ctrl+Alt+V
Sublime 的图片预览本质是“借力”:借系统查看器、借浏览器引擎、借插件桥接。没有银弹方案,关键在根据场景选对组合——悬停看图标用 ImagePreview,写文档配图用 MarkdownPreview,改 SVG 时则务必配上 SideBarEnhancements 做右键保底。最容易被忽略的是路径上下文和协议限制,不是插件没装好,而是环境没对齐。









