微信小程序加载本地图片的方法

微信小程序开发涉及到的图片素材有时需要从本地加载，下面介绍在小程序中如何加载本地图片。

第一步：在json文件中配置本地路径

在小程序的json文件中，需要配置小程序所需的本地图片路径：

1.在pages目录下新建一个json文件，比如localImages.json；

2.在此文件中加入以下代码：

{usingComponents:{image-loader:./components/image-loader/image-loader},localImages:{imagePath1:/images/image1.png,imagePath2:/images/image2.png,imagePath3:/images/image3.png}}

第二步：在wxml文件中使用本地图片

使用小程序自带的image组件，并在其中添加image-loader组件，代码如下：

其中，image的src需要使用json文件中配置的路径，而image-loader用于加载json文件中定义的本地图片路径。

第三步：在js文件中处理加载后的图片

在js文件中需要处理加载完成的图片，以下代码用于处理加载后的图片：

//js代码Page({data:{imagePath1:'',imagePath2:'',imagePath3:''},onLoad:function(){this.setData({imagePath1:this.data.localImages.imagePath1,imagePath2:this.data.localImages.imagePath2,imagePath3:this.data.localImages.imagePath3})},loadImage:function(e){varid=e.currentTarget.dataset.imageid;this.setData({['localImages.'+id]:e.detail.path})}})

在onLoad函数中，将json文件中配置的路径赋值给对应的data变量，在加载完成时使用loadImage函数获取图片的本地路径，并将其赋值给json文件中对应的路径。