sublime text 通过 imagepreview 插件实现图片路径预览：安装后光标置于静态图片路径（如 "./assets/logo.png"），按 alt+i/option+i 调用系统查看器打开；不支持变量拼接、环境变量、url 及语法错误路径，且以项目根目录为路径解析基准。
Sublime Text 本身不支持直接在编辑器内预览图片，但通过插件可以实现「点击路径→弹出预览窗口」的效果；关键不是“内置打开”，而是“识别图片路径并调用系统或内置查看器”。
怎么让 Sublime 识别并预览代码里的图片路径
核心是安装 ImagePreview 插件（注意不是 ImageResize 或 SideBarEnhancements 的子功能）：
- 用
Ctrl+Shift+P（Windows/Linux）或Cmd+Shift+P（macOS）打开命令面板，输入Package Control: Install Package回车 - 搜索
ImagePreview，选中安装（作者是wyse007，GitHub 仓库名sublime-image-preview） - 安装后重启 Sublime（部分版本需手动重启才生效）
- 确保光标停在合法图片路径上（如
"./assets/logo.png"、url(icons/close.svg)、src="img/photo.jpg"），然后按Alt+I（Windows/Linux）或Option+I（macOS）触发预览
它会自动提取字符串中的相对/绝对路径，尝试解析为完整文件路径，并用系统默认图片查看器打开——不是内嵌预览，但足够快。
为什么有些路径点不动？常见识别失败原因
ImagePreview 不是正则硬匹配，而是结合上下文判断。以下情况会导致失效：
intense图片全屏浏览插件(jQuery)
下载
intense图片全屏浏览插件(jQuery)，当鼠标点击图片时，可以全屏幕浏览图片，移动鼠标可以查看图片不同的部分，适合相册展示图片细节。兼容主流浏览器，php中文网推荐下载！ 使用方法： 1、head区域引用文件styles.css及intense.js 2、在文件中加入区域代码 3、复制images文件夹
- 路径被变量拼接：如
src={base + "/icon.png"}→ 插件无法运行时求值，直接忽略 - 路径含未展开的环境变量：如
"${ASSETS}/logo.webp"或%PUBLIC_URL%/logo.svg→ 不识别 - 引号不闭合或语法错误：当前行有 JS/HTML 语法错误时，插件可能跳过整行解析
- 路径是 URL（
https://开头）：默认不处理网络地址，避免误触；如需支持，得改插件源码里的is_local_path()判断逻辑
建议先用纯静态字符串路径测试，确认插件工作正常后再排查复杂场景。
有没有真正的「内嵌图片预览」？替代方案对比
目前没有稳定、跨平台、维护良好的 Sublime 内嵌图片渲染方案。几个常见尝试的结果：
-
HTML-CSS-JS Prettify：只格式化，不预览 -
SideBarEnhancements→ 右键Open With → System Default：可行，但必须先在侧边栏选中文件，不能从代码字符串跳转 - 自己写 Python 插件调用
webbrowser.open()：对本地file://URL 有效，但 SVG 可能乱码，WebP 在旧系统打不开 - 用
Markdown Preview配合：仅限 Markdown 文件内，且需保存后刷新预览窗
所以 ImagePreview 仍是折中最佳选择：轻量、快捷、不依赖浏览器、适配多数项目结构。
真正容易被忽略的是路径解析的「当前工作目录」——它以 Sublime 打开的文件夹（project folder）为根，不是文件所在目录。如果图片路径是相对当前文件的（比如 ../images/foo.png），而你没把整个项目根作为 folder 打开，预览就会报错「file not found」。
