微信头像网要点看了好几篇经验或是文章，写的不是很清楚，而且步骤上也不够直白通俗，没有做到让我等零基础（网页开发零经验）的人做到一看就会的地步，所以，我这里就来卖弄一下文采了，看了我这篇你还不会，可以和我交流哈！

　　工具/原料

　　微信开发工具微信小程序图片

　　方法/步骤

　　1.首先用你的邮箱去注册一个微信小程序，这里不多说了，打开微信开发工具，选择小程序项目，没有的可以自己创建一个模板程序即可。

　　2.我们开发微信小程序自然是得读官方开发文档的。html+css+js就相当于这里的wxml+wxss+js，所以原理上一样，微信官方封装了点东西罢了。这里我们要添加图片，那么就得找到组件或者叫做控件，我们从文档里面找到组件的文档说明。

　　3.首先我们要添加本地图片，这里微信开发工具不支持在项目目录下直接添加文件，所以我们就打开点打开硬盘，回到项目的本地目录下，创建一个图片目录放置我们的图片即可，微信开发工具会自动识别项目下的目录和文件的了。

　　4.这里我提一下吧，由于微信我们个人的微信小程序只能上传２Ｍ，所以图片不能很大，否则以后的程序就没法写了，这里建议使用webp或者svg格式图片，没有的可以转换一下格式，原来8k的图片转了后变成2k，也还行吧。然后我们在index.wxml文件里添加一个image组件，src使用双引号填入图片的相对地址，当然了这里也是可以使用网络地址的。

　　5.我们添加了图片以后，就可以在index.wxss文件中写入css样式了，应用到我们的图片上的了。这里我复制了一下下方的css样式，改了个名字。

　　6.如果我们在image组件里面使用style属性写样式，那么这里将会先应用style属性的样式了。微信开发工具里面的注释也是可以使用ctrl+/来进行快捷注释的。这个很方便。

　　7.最后我们更改一下图片的大小样式，其他的也就以后再说了，添加本地图片仅仅只是第一步，当然，如果你开发一个简单的用于宣传的微信小程序，一个图片就足以了。效果如下图。

　　注意事项

　　注意如果你没有设置图片宽高，图片的默认宽高是300px和225px。注意图片的大小和格式