微信小程序开发之如何加载本地图片？【百科全说】

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

操作方法

01

首先用你的邮箱去注册一个微信小程序，这里不多说了，打开微信开发工具，选择小程序项目，没有的可以自己创建一个模板程序即可。这里我已经打开我的项目了。一开始当你扫码登录了开发工具之后，最先看见的是下面左边的图。这里我们添加了一张图片，效果就像右边的图了。
02

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

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

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

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

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

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

微信小程序开发之如何加载本地图片？

操作方法

相关推荐