VSCode图片预览插件 Image preview

Posted 2023-02-24 星云-

VSCode前端开发图片预览插件 Image preview（支持css预览 支持svg格式）

一款提高前端开发效率的插件 ，代码中hover直接预览图片

先上效果图

不仅html中可以预览 js代码里的引用也可以识别

同理css中的图片引用也可以识别

功能详情

安装步骤

1. 插件市场搜索 Image preview
2. 点击安装
3. 设置

👇下面给出一些默认设置

// The default color to be used in svg previews
  "gutterpreview.currentColorForSVG": "white",  // svg预览中使用的默认颜色

  // A flag which indicates whether resources should be resolved from references
  "gutterpreview.enableReferenceLookup": false, // 指示是否应该从引用解析资源的标志

  // The maximum height of the image preview 
  "gutterpreview.imagePreviewMaxHeight": "100", // 预览图片高度最大值

  // Specify path mapping to be computed relative to project root.
  "gutterpreview.paths": , // 指定要相对于项目根计算的路径映射

  // A flag which indicates whether the image preview should be shown on the gutter
  "gutterpreview.showImagePreviewOnGutter": true, // 指示图像预览是否应显示在左侧的行栏

  // A flag which indicates whether to underline recognized URLs
  "gutterpreview.showUnderline": true, // 是否对已识别的url加下划线

  // Additional folder to consider when resolving relative urls
  "gutterpreview.sourceFolder": "src"  // 解析相对url时要考虑的附加文件夹

ps： 可以根据自身需求在User settings json文件里添加对应的设置去覆盖默认设置
示例：我的项目里图片是引用的根文件夹下的public文件夹

所以我需要配置附加文件夹

	// 图片预览插件的附加文件夹
  "gutterpreview.sourceFolder": "public"

完成