前端拿到图片数据流无法显示问题

       一般来说我们会通过图片动态绑定url地址，去显示图片。前端在接收到后端返回的二进制数据量后会通过blob的形式去创建临时url显示图片。

后端部分代码

// 调用工具类返回二维码数据流
            BufferedImage codeStream = QRCodeUtil.createCodeToOutputStream(codeContent);
            ServletOutputStream outputStream = response.getOutputStream();
            ImageIO.write(codeStream, "png", outputStream);
            // 关闭资源
            outputStream.close();

            response.setContentType("image/png");
            response.setStatus(200);

*前端请求部分(这里必须加上 responseType: "blob")不然虽然前端可以拿到数据流，但是会无法显示。

import request from "@/utils/request";

export function getQRCode(params) {
  return request({
    url: "/QR-Code",
    method: "get",
    responseType: "blob", // 指定响应类型为 Blob
    params,
  });
}

vue.js

        getQRCode({ codeContent: this.codeContent }).then((res) => {
          var blob = new Blob([res.data]);

          this.qrCodeUrl = URL.createObjectURL(blob);
        });

   <el-image :src="qrCodeUrl" id="codeImg" v-if="qrCodeUrl" />