接口返回的是一个图片文件而不是url 前端如何显示？

请求后端接口 返回的时一张图片 如何在img中显示?

preview里查看就是显示一张图片

效果预览：

console.log(res):

以下是处理方法： （亲测有效）

@/api/orderService

//根据模型id获取流程模型png
export const reqGetActivitiProcessModelBpmnPng = (id) => {
  return request({
    url: req6+ `/activitiProcessModel/getActivitiProcessModelBpmnPng/${id} `,
    method: 'get',
    responseType: 'arraybuffer' // ++
  })
}

"流程模型:" prop="processModelId">
        <el-select
          style="width: 55%"
          v-model="activitiWorkOrderClassify.processModelId"
          @change="selectChange"
        >
          <el-option
            v-for="item in modelArr"
            :key="item.id"
            :value="item.id"
            :label="item.name"
          /> 
        > 
        <span style="font-weight: 700; margin-left: 20px"> 预览模型: span>
        <div style="
            position: absolute;
            width: 120px;
            height: 40px;
            right: 0;
            top: 0;">
        // 根据模型id显示预览图片效果
          <el-image
            :src="imgSrc"
            :preview-src-list="imgslist"
            ref="idface"
            style="width: 100%; height: 40px"
          />
        div>
      el-form-item>
 
methods: {
 async selectChange(val) {
      const res = await reqGetActivitiProcessModelBpmnPng(val);
      let u8a = new Uint8Array(res).reduce((res, byte) => res + String.fromCharCode(byte),
        "");
      this.imgSrc = `data:image/png;base64, ${btoa(u8a)}`; //图片显示出来了
      this.imgslist = [this.imgSrc];//放大预览
    },
}

更多方法可以参考：https://segmentfault.com/q/1010000016935073