图片流
有时候服务端返回的一张图片是一串文件流,而文件流无法直接加在 img 标签上进行渲染,如下:
哦豁,有点蛋疼了吧。
这时候请求的链接其实就是当前图片的路径。
但是我们的图片路径往往是通过网络请求出来的,它是动态的。
这时候可以试试这个。
axios 解决
通过在 axios 添加responseType: "blob",
将当前的请求变成blob
这时候就能得到如下
然而由于是 blob格式的 我们依然无法直接将返回结果直接放在img
标签进行展示。
这时候我们还需要window.URL.createObjectURL(res.data);
将当前的blob
转化一下,如图
axios 示例
request({
url: API.getQrCode,
method: "get",
responseType: "blob",
})
.then((res) => {
if (res.data.size < 100) {
this.$message({
showClose: true,
center: true,
message: "生成二维码失败!",
type: "error",
});
this.qrCode = "";
return;
}
this.qrCode = window.URL.createObjectURL(res.data);
})
.catch((err) => {
this.qrCode = "";
console.log(err);
});