前端图片代码自动生成

在前端开发中，大家免不了要用到各式各样的图片来美化我们的页面，无论是通过<img>标签还是利用background样式属性来引用图片，都需要我们来手动读取图片尺寸信息，然后再编写图片样式代码，这样的劳动重复且繁琐！！！

是否有简单高效的实现方案呢？
当然，下面来给大家推荐一款vs code插件：SongWukong。

SongWukong

这个插件使用起来非常简单，插件安装后，只需要将使用的图片链接复制到剪切板，然后直接在vscode编辑器中【右键】-【生成代码】，就可以在光标所在位置看到根据复制的图片链接所生成的代码了。生成的代码是支持模版配置，代码生成时会自动填充图片尺寸和图片链接。

插件使用

安装

方法一：通过 vscode 编辑器安装

vscode中安装
- 打开 vscode 编辑器点击【扩展】
- 搜索 SongWukong 点击【安装】
- 通过 vscode 应用商店安装
方法二：点击链接https://marketplace.visualstudio.com/items?itemName=dafengxiang.SongWukong
点击【Install】

插件市场安装
安装成功
点击鼠标右键会出现如下快捷键

安装成功

参数	说明	类型	默认值
template	代码模版	String	见默认模版
withProtocol	图片链接是否保留协议	Boolean	false
picTransRatio	图片宽高转为代码比率，例如上传图片为三倍图，需生成二倍尺寸代码，比率为 0.666666（2/3）,无限循环小数需保留 5 位以上小数	Number	1

默认模版

.size({width}px,{height}px);
.po-absolute;
top: 0;
left: 0;
background: url('{url}') no-repeat center / {width}px {height}px;

template模版参数

读取剪切板链接生成代码：