一、请求
重点：添加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;
  // 验证是否为有效Blob
  if (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>