vue显示后端传递的图片流

一、显示部分（组件我使用的vuetify）

<template>
  <v-container fluid>
    <v-card width="100%" max-width="100%" class="mb-5">
      <div class="mb-2 d-flex align-center justify-start">
        <v-btn color="primary" class="mr-50" @click="back" small="">返回行程列表</v-btn>
      </div>
      <img :src="codeImg" alt="" />
    </v-card>
  </v-container>
</template>

<script>
import * as api from '../../../api/index';


export default {
  data() {
    return {
      lineId: '',
      driverId: '',
      channel: 1,
      codeImg: '',
    };
  },
  mounted() {
    this.lineId = Number(this.$route.params.lineId);
    this.driverId = Number(this.$route.params.driverId);
    this.channel = Number(this.$route.params.channel);
    this.getTripQrCode();
  },
  methods: {
    getTripQrCode() {
      const data = {
        lineId: this.lineId,
        channel: this.channel,
      };
　　//这里注意调用接口时，要加上：responseType: 'arraybuffer',
      api.main
        .op_line_qrcode_generateTripQrCode_get({
          params: data,
          responseType: 'arraybuffer',
        })
        // eslint-disable-next-line promise/always-return
        .then(res => {
　　　　　　//这里就是将得到的图片流转换成blob类型
          const blob = new Blob([res.data], {
            type: 'application/png;charset=utf-8',
          });
          const url = window.URL.createObjectURL(blob);
          this.codeImg = url;
        })
        .catch(err => {
          console.log(err);
        });
    },
    back() {
      this.$router.go(-1);
    },
  },
};
</script>