如何快速生成图片代码_根据图片生成代码

前端图片代码自动生成

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

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

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

安装

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

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

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

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

配置

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

默认模版

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

template模版参数

功能使用

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

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