VSCode需安装Image Preview插件才能预览图片，要求路径正确、文件存在且插件启用；支持.png/.jpg/.gif/.svg/.webp等格式，仅响应编辑器内可点击的有效路径文本。
VSCode 本身不内置图片预览功能，但通过 Image Preview 插件可以点击图片路径直接在编辑器内查看——前提是路径正确、文件存在，且插件已启用并识别到支持的格式。
安装并启用 Image Preview 插件
插件必须手动安装，VSCode 不会自动加载。打开扩展面板（Ctrl+Shift+X 或 Cmd+Shift+X），搜索 Image Preview，选择作者为 Kamikaze 的那个（图标是眼睛，下载量最高）。安装后无需重启，但需确保它处于启用状态。
- 如果安装后仍不生效，检查插件右下角是否显示「已启用」；禁用再启用一次常能解决初始化失败问题
- 该插件默认只响应
.png、.jpg、.jpeg、.gif、.svg和.webp文件，不支持.bmp或未压缩的.tiff - 插件不会预览 Base64 图片字符串（如
data:image/png;base64,...），仅处理真实文件路径
图片路径必须可被 VSCode 解析为相对/绝对有效路径
Image Preview 只对编辑器中“可点击的路径文本”起作用——它依赖 VSCode 的链接检测逻辑。常见失效场景：
- 路径带中文或空格但未用引号包裹：写成
./img/我的图.png会失败；应写成"./img/我的图.png"或'./img/我的图.png' - 使用变量拼接路径：如
src={iconPath + '/logo.png'}（JS/TS 中）不会触发预览，插件无法运行时解析表达式 - 路径是 URL：以
http://或https://开头的地址不会预览（插件不抓取网络资源） - 路径为绝对路径但不在工作区根目录下：如
/home/user/project/img/a.jpg在 Linux/macOS 下可能因权限或沙盒限制无法读取
在 Markdown、HTML、CSS、JS/TS 中触发预览的方式差异
不同语言模式下，路径语法不同，插件匹配逻辑也略有区别：
- Markdown：
—— 光标放在括号内路径上，按Alt+Click（Windows/Linux）或Option+Click（macOS）即可预览 - HTML：
<img src="./assets/logo.svg" />—— 同样需将光标置于双引号内的路径字符串中，再快捷键点击 - CSS：
background: url('./bg.png');—— 支持，但注意括号必须是圆括号，且路径在单/双引号内 - JS/TS：
require('./icon.png')或import avatar from './avatar.jpg'—— 支持 CommonJS 和 ESM 静态导入路径，但不支持模板字符串：`./${name}.png`无效
预览窗口行为与常见干扰项
预览弹出后是一个只读浮动视图，不是新标签页。容易被忽略的关键点：
- 预览窗口默认尺寸固定（约 500×500），大图会缩放适配；拖动窗口边缘可调整大小，但关闭后下次打开仍恢复默认
- 若图片修改后预览未更新，不是缓存问题——插件是实时读取文件，检查是否保存了文件（VSCode 默认关闭「Auto Save」）
- 多光标选中多个路径时，只有当前主光标所在路径会触发预览；其余光标位置无效
- 终端、调试控制台、输出面板中的路径文本不会触发预览，插件仅作用于编辑器文档内容
路径是否被识别、文件是否存在、插件是否真正激活——这三个条件缺一不可。很多人卡在「点了没反应」，其实只是路径少了一对引号，或者文件明明在 src/assets 却写了 ./assets 而当前文件在 src/pages 下导致相对路径错位。
