img-wh

安装

https://marketplace.visualstudio.com/items?itemName=lihaoming.img-wh 也可以在 vscode 插件市场可以搜索 img-wh 安装

功能说明

• 快速计算好图片尺寸并根据模板返回图片的尺寸、相对路径、最后一级路径
• 支持自定义生成的代码模板
• 支持配置路径来指定需要的图片

使用方法

按下快捷键选择图片即可生成代码片段（注意，默认只显示在 src 项目下的图片）

生成图片

• windows：按 ctrl+4
• mac：按 cmd+4

生成背景

• windows：按 ctrl+5
• mac：按 cmd+5

自定义配置项教程

在插件的设置可以配置生成的代码模板和过滤不需要的图片

配置快捷键

默认为 windows：按 ctrl+4 mac：按 cmd+4，需要修改的在 vscode 的键盘快捷方式中直接搜索 img-wh 然后修改快捷键即可

配置生成的代码模板

默认为 a-img 组件和 v-bg 的生成代码，也可以自定义生成 width 和 height 为图片的宽和高，src 为图片地址，shortImg 为图片地址的最后一级路径,className 为文件名。 目前只支持修改 ctrl+4 快捷键的生成代码！

    "img-wh.tpl": "<a-img class="${className}" w="${width}" h="${height}" src="${shortImg}"/>"

配置路径过滤不需要的图片

<!-- opthon -->
    "img-wh.path": ["src/assets/**/*.{png,jpg,gif}"]