如何快速生成图片代码

前端图片代码自动生成

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

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

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

安装

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

  • 打开 vscode 编辑器 点击【扩展】
  • 搜索 SongWukong 点击【安装】
  • 通过 vscode 应用商店安装

• 方法二：点击链接https://marketplace.visualstudio.com/items?itemName=dafengxiang.SongWukong
  点击 【Install】
  

• 安装成功
  点击鼠标右键会出现如下快捷键
  

配置

• 点击 【设置】图标
• 找到 【扩展】
• 选择 【SongWukong】
• 进行相应配置内容

参数	说明	类型	默认值
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模版参数

参数	说明	类型
{width}	图片宽度	Number
{height}	图片高度	Number
{url}	图片链接	String

功能使用

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

• 右键 - 生成图片代码
• 快捷键（win: ctrl+g / mac: cmd+g）