VSCode可通过插件和配置实现图片及SVG实时预览：Image Preview支持多格式右键预览，SVG Viewer专精SVG双击渲染与自动刷新，1.84+版本内置基础图片缩略图预览（SVG仅显示源码），搭配Live Server可浏览器中实时查看HTML内嵌SVG效果。
VSCode 默认不直接渲染图片或 SVG 的实时预览，但通过插件和少量配置，可以实现点击即看、保存即更新的轻量级预览体验。
安装支持图片预览的插件
VSCode 市场中几个主流插件能稳定提供内联或侧边预览：
- Image Preview：轻量、开源，支持 PNG/JPG/GIF/SVG 等，右键菜单或快捷键（Ctrl+Shift+P → “Image Preview”）触发，预览窗口可拖动、缩放
- SVG Viewer：专为 SVG 优化，双击 SVG 文件自动打开渲染视图，支持实时重载（保存后自动刷新）、查看源码与图形切换
- 如需更沉浸式体验，可搭配 Live Server 插件：右键 HTML 文件选择 “Open with Live Server”，在浏览器中预览含 img/svg 标签的页面，修改文件后自动刷新
启用内置图片预览（无需插件）
VSCode 1.84+ 版本已集成基础图片预览功能：
- 直接双击项目中的 PNG、JPG、GIF、SVG、WebP 等文件，会以只读方式在编辑器标签页中显示缩略图
- 鼠标悬停在文件资源管理器的图片图标上，会浮现小尺寸预览（需开启设置：“Workbench > Explorer: Show Preview for Images”）
- 注意：SVG 在此模式下仅显示原始 XML 内容，不渲染图形；要渲染 SVG 必须用 SVG Viewer 或嵌入 HTML 预览
快速预览 SVG 的实用技巧
针对开发中高频使用的 SVG，推荐组合方案：
- 把 SVG 文件放在 HTML 中用
，再用 Live Server 启动本地服务，浏览器中实时查看效果 - 在 SVG 文件中添加
，配合 SVG Viewer 插件获得更友好的缩放体验 - 使用 VSCode 的“拆分编辑器”功能：左侧写 SVG 代码，右侧用 SVG Viewer 打开同一文件，修改保存后右侧自动刷新
基本上就这些。不需要复杂配置，装对插件 + 开启对应设置，图片和 SVG 就能像写代码一样“所见即所得”。
