How to convert binary streaming pictures to normal pictures and display them

axios({
        method: 'get',
        url,
        responseType: 'arraybuffer' // The most important      })
        .then(function (response) {
           = 'data:image/jpeg;base64,' + that.arrayBufferToBase64()
        })

arrayBufferToBase64 (buffer) {
      var binary = ''
      var bytes = new Uint8Array(buffer)
      var len = 
      for (var i = 0; i < len; i++) {
        binary += (bytes[i])
      }
      return (binary)
    },

 <img :src="src" alt="Verification Code">

<el-image v-loading="loading" style='height: 480px;' :src="imgsrc"></el-image>

// /api/file request methodexport function getFlowPhoto(data) {
    return request({
        url: '/xxx/xxxx/getFlowPhoto',
        method: 'post',
        responseType: 'blob',
        data
    })
}

<script>
  import {getFlowPhoto} from "@/api/";
  export default {
    data() {
      return {
        imgsrc:'',
        loading:false,
      }
    },
    mounted() {},
    methods: {
      fetchData() {
         = true;
        var that = this;
        getFlowPhoto({id:xxx}).then((res) => {
          if( == 401){
            this.$message({
              message: ,
              type: "error",
            });
          }
          if(res){
            const myBlob = new ([res], {type: 'image/jpeg'})
            const qrUrl = (myBlob)
             = qrUrl;
             = false;
          }
        });
      },
    }
  }
</script>