首先加载二进制图片要把接口请求返回的二进制流数据类型改变
二进制对象或者类型化数组
text
//二进制对象数组
responseType: 'blob'
//
responseType: 'arraybuffer'
不然获取回来的数据全部都是乱码的
这样的：
text
�PNG
IHDR M
)�l��IDATx���d������d�1����������Ld.3I$�L�$
Ɍ$�dL2��%�L�%I"I��L�Ld�I"I��������z�:��>�sv�;��
��������z�^���ȕ� G��|@����<�?����!��y>
���C���|@����<�?����!��y> ���C���|@����<�?
����!��y> ���C���|@����<�?����!��y>
只要改了接口请求返回类型后可以用**window.URL.createObjectURL(接口返回的数据)**这样就生成类似base64图片流了
text
<template>
<div>
<div class="box-item">
<img :src="imgdata" class="img" />
</div>
</div>
</template>
<script>
import axios from "axios";
export default {
data() {
return {
hide: false,
imgdata: "",
};
},
mounted() {
this.onSubmit();
},
methods: {
async onSubmit() {
let res = await axios.post(
this.form.url,
{
config: this.config,
},
{
responseType: "blob",
}
);
this.imgdata = window.URL.createObjectURL(res.data);
},
},
};
</script>
<style>
body {
background-color: #fff;
}
</style>