微信小程序将图片数据流添加到image标签中
2017-09-29 17:46
375 查看
有时候我们通过API接口获取图片时,拿到的是图片的数据流:有可能是二进制数据流,也可能是base64编码的数据流。
data: {
captchaImage: '../../images/captcha.png', // 如果需要的话,可以给张默认的图片先
},
当获取到的是原始的图片二进制数据流时,只需要将image标签的src直接设置为图片url就可以,如:
var that = this var url = constants.WEB_SERVER_DOMAIN + '/getImage' console.log(url) that.setData ({ captchaImage: url, })
当获取到的是图片的base64编码的数据流时,需要将接口获取到的数据再解析base64编码,如:
wx.request({ url: constants.WEB_SERVER_DOMAIN + '/getImage', method: 'GET', header: { 'content-type': 'application/octet-stream', }, success: function (res) { //console.log(res.data) var data = res.data console.log(res.statusCode) if (res.statusCode == 200) { that.setData ({ captchaImage: 'data:image/png;base64,' + data, // data 为接口返回的base64字符串 }) } },
注意:上面解析base64时,在数据流前面加上 data:image/png;base64, (注意是有个“,”) 。image/png改为对应的图片类型,如 image/gif, image/jpg等。
然后在wxml文件中,使用image标签,如:
<image src="{{captchaImage}}" style="width:100px;height:44px;" ></image>
相关文章推荐
- 【微信小程序】图片被压扁怎么办?在image中添加 mode="widthFix"
- 微信小程序商城添加商品时无法上传图片
- 微信小程序background设置背景图片不能用本地图片
- 第六课 TextView添加图片 及更改程序图标
- 传图取字:微信小程序自动把图片上的文字提取出来
- 微信小程序上传图片
- 微信小程序保存网络图片的方式1:getimageinfo+saveImageToPhotosAlbum
- 【微信小程序】微信小程序wx.previewImage预览图片
- Android 微信网址分享添加网络图片
- 微信小程序多张图片和表单一起上传,验证表单及进度条的实现完整代码
- 微信小程序swiper同时显示三张图片样式
- 添加小程序搜索关键词-微信小程序开发-视频教程18
- 微信小程序开发实现图片滚动效果
- 微信小程序之----上传图片
- 在java窗口程序中添加背景图片
- Android GridView扩展仿微信微博发图动态添加删除图片
- 微信小程序实现图片预加载组件
- 微信小程序中的fixed布局 以及video标签添加position:fixed中的坑
- 【代码】微信小程序 简单一个页面,网上图片展示
- 【解决】微信小程序 页面 图片触摸缩放 【附上代码】