## 头像图片更换 [TOC] ### wxml ``` <image mode="aspectFill" src="{{isEmpty?'/images/fcbef251ffbb8af6420e945c107489d5.jpg':imgUrl}}" catchtap="click"></image> ``` >图片mode值，详见[链接](https://www.kancloud.cn/lixu/wechat_mp/799916) 为图片绑定click点击事件 使用三元表达式判断是否更换过图片 ### wxss ``` image{ margin-top: 200rpx; width: 200rpx; height: 200rpx; border-radius: 50%; border:2px dotted #405f80; } ``` ### js ``` Page({ data: { isEmpty: true }, ``` >设置isEmpty值为空 ``` var image = wx.getStorageSync('image'); if (image) { var imgUrl = image.imgUrl[0]; var isEmpty = image.isEmpty; this.setData({ imgUrl, isEmpty }) } ``` >从缓存中获取image的值，判断image中是否有上传过的图片，如果有则取到该图片地址与isEmpty的值 ``` click() { wx.chooseImage({ count: 9, sizeType: ['original', 'compressed'], sourceType: ['album', 'camera'], success: res => { var tempFilePaths = res.tempFilePaths; wx.setStorageSync('image', { imgUrl: tempFilePaths, isEmpty: false }); var image = wx.getStorageSync('image'); var imgUrl = image.imgUrl[0]; var isEmpty = image.isEmpty; this.setData({ isEmpty: isEmpty, imgUrl }) } }) }, }） ``` >执行点击事件之后进行图片更换，并将新图片地址写入缓存