🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
>实现效果 ![](https://box.kancloud.cn/5a68b7033db0e22382e97e1915af8023_342x299.gif) >实现步骤 1. 通过wx.chooseImage实现图片选择切换 2. 得到图片的网络地址,并通过设置isEmpty状态控制图片选择 3. 将图片地址以及isEmpty写入缓存 4. onLoad时读取缓存,加载 >wxml 通过三元表达式用isEmpty状态控制图片加载地址 ``` <image src="{{isEmpty? '/swiper/l1.jpg':imgUrl}}" catchtap="c_click" mode="aspectFill"/> ``` >js ``` data: { isEmpty: true, imgUrl: '' }, onLoad(){ var image = wx.getStorageSync("image"); if(image){ var imgUrl = image.imgUrl; var isEmpty = image.isEmpty; this.setData({ imgUrl, isEmpty }) } }, c_click(){ wx.chooseImage({ count: 9, sizeType: ['original','compressed'], sourceType: ['album','camera'], success: (result)=>{ /* 拿到图片地址 */ var tempFilePaths = result.tempFilePaths; /* 将图片地址 isEmpty状态存入缓存 */ /* 其中存入的缓存 key为`image`,value为 {"imgUrl": tempFilePaths, "isEmpty": false} */ wx.setStorageSync('image', { "imgUrl": tempFilePaths, "isEmpty": false }); /* 获取缓存中的key为image的缓存 */ var image = wx.getStorageSync('image'); /* 获得图片地址 */ var imgUrl = image.imgUrl; /* 获得isEmpty状态 */ var isEmpty = image.isEmpty; /* 写入data中,等待onLoad获取 */ this.setData({ imgUrl, isEmpty }); // console.log() } }); } ```