安装
- 安装
链接内点击install即可安装https://marketplace.visualstudio.com/items?itemName=lihaoming.img-wh
也在vscode插件市场可以搜索img-wh安装
功能说明
- 快速计算好图片尺寸并根据模板返回图片的尺寸、相对路径、最后一级路径
- 支持自定义生成的代码模板
- 支持配置路径来指定需要的图片
使用方法
按下快捷键选择图片即可生成代码片段(注意,默认只显示在src项目下的图片)
- windows:按ctrl+4
- mac:按cmd+4
自定义配置项教程
在插件的设置可以配置生成的代码模板和过滤不需要的图片
配置快捷键
默认为windows:按ctrl+4 mac:按cmd+4,需要修改的在vscode的键盘快捷方式中直接搜索img-wh然后修改快捷键即可
配置生成的代码模板
默认为a-img组件的生成代码,也可以自定义生成
width和height为图片的宽和高,src为图片地址,shortImg为图片地址的最后一级路径,className为文件名
"img-wh.tpl": "<a-img class="${className}" w="${width}" h="${height}" src="${shortImg}"/>"
配置路径过滤不需要的图片
<!-- opthon -->
"img-wh.path": ["src/assets/**/*.{png,jpg,gif}"]
| |