前端展示后端返回的图片流

一、请求
重点：添加responseType: “blob”,

// Vue2组件中请求示例
methods: {fetchImage() {return axios.get('/api/getImage', {params: { id: 123 },responseType: 'blob'  // 关键配置（重点，必须配置）});}
}或
export function screenshot(id) {return request({url: "/api/getImage" + id,method: "post",responseType: "blob",});
}

‌二、处理二进制数据流‌
‌方法1：转换Blob为可访问URL‌
使用URL.createObjectURL()将Blob对象转换为临时URL，适用于直接展示的场景：

fetchImage().then(res => {const blob = res.data;// 验证是否为有效Blobif (blob instanceof Blob) {this.imageUrl = URL.createObjectURL(blob);} else {console.error('Invalid Blob data');}
}).catch(error => {console.error('加载失败:', error);
});

‌方法2：转换为Base64字符串‌
若后端返回非标准Blob（如原始二进制数组），需通过FileReader转为Base64：

fetchImage().then(res => {const reader = new FileReader();reader.onload = () => {this.imageUrl = reader.result;  // 格式为data:image/png;base64,...};reader.readAsDataURL(res.data);  // Blob转Base64
});

‌三、模板动态渲染‌
‌绑定图片地址到标签‌
根据生成的路由或Base64字符串动态渲染图片，并处理加载状态：

<template><div><img v-if="imageUrl" :src="imageUrl" alt="动态图片"><div v-else class="loading">加载中...</div></div>
</template>