vue 异步获取图片并加载
使用this.$http()获取json中的数据,后面可增加参数。then()方法异步执行,就是当then()前面的方法执行完之后在执行then()里面的方法,这样就不会发生获取不到数据的问题。<div ><button type="text" size="small" @click="view()">加载图片</button><im...
·
使用this.$http()获取json中的数据,后面可增加参数。
then()方法异步执行,就是当then()前面的方法执行完之后在执行then()里面的方法,这样就不会发生获取不到数据的问题。
<div >
<button type="text" size="small" @click="view()">加载图片</button>
<img :src="imageurl" >
</div>
//加载后端返回的byte[]图片
view(id){
var scene="xx"
this.$http({
url: this.$http.adornUrl('xxxx'),
method: 'post',
data: {
'scene': scene
},
responseType: "arraybuffer", // 关键 设置 响应类型为二进制流
}).then(function (res) { // 将后台的图片二进制流传华为base64
return 'data:image/png;base64,' + btoa(new Uint8Array(res.data).reduce((data, byte) => data + String.fromCharCode(byte), ''));
}).then(data=>{
this.imageurl=data; // data即为图片地址
})
}
// 效果图
更多推荐
已为社区贡献1条内容
所有评论(0)