springboot后端的图片显示在vue前端

vue前端代码

methods里面

getGOImage(taskId, moduleId) {
      if (this.task.species === 'Homo sapiens') {
        console.log(this.task.species)
      } else {
        console.log(this.task.species)
        this.$axios.get(process.env.VUE_APP_BASE_API + '/task/GOImage/' + taskId + '/details/' + moduleId, {
          responseType: 'blob'
        }).then(response => {
          const blob = new Blob([response.data])
          const src = window.URL.createObjectURL(blob)
          console.log(src)
          this.GOImage = src
        }, function (err) {
        })
      }
    }

钩子里面

mounted() {
    this.getModuleDetailsById()
    setTimeout(() => {
      this.getStringUrl()
      this.drawPPI()
      this.getGOImage(this.taskId, this.moduleId)
    }, 5000)
  }

页面里面

<div style="margin-top: 20px">
        <center>
          <el-image :src="GOImage" style="width: 50%; height: 50%; margin-top: 5%"></el-image>
          <div>Gene Ontology Enrichment Analysis</div>
        </center>
</div>

数据里面

data() {
    return {
      GOImage: '',
      formLabelWidth: '130px',
      title: '',
      geneTotal: 0,
      miRNATotal: 0,
      taskId: '',
      task: {},
      moduleId: '',
      module: {},
      allGene: [],
      allMiRNA: [],
      allGeneList: '',
      geneRows: [],
      miRNARows: [],
      searchModel: {
        genePageNo: 1,
        genePageSize: 5,
        miRNAPageNo: 1,
        miRNAPageSize: 5
      },
      StringUrl: '',
      ppiNetwork: {}
    }
  },

后端代码：

@GetMapping(value = "/GOImage/{taskId}/details/{moduleId}")
    public ResponseEntity<ByteArrayResource> getGOImage(@PathVariable("taskId") String taskId, @PathVariable("moduleId") String moduleId, HttpServletRequest request) throws Exception {
        // 这里根据我给定的fileId来下载指定的文件，
        // 如果你想根据其他方式来下载指定文件的话，请自己修改业务逻辑
        // 1. 根据fileId从数据库中获取到指定的文件信息，包括文件名、文件存储地址等等。
        // 1.1 假设我已经获取到了文件信息。
        System.out.println("getGOImage 被调用！");



        Task task = taskService.getById(taskId);
        String fileName = "GO_enrichment_bar.png";
        String filePath = task.getResult() + "/module_" + moduleId + "/" + fileName;

        // 2. 解决下载的文件的文件名出现中文乱码
        String userAgent = request.getHeader("User-Agent");
        if (userAgent.contains("MSIE") || userAgent.contains("Trident")) {
            // IE浏览器
            fileName = java.net.URLEncoder.encode(fileName, "UTF-8");
        } else {
            // 非IE浏览器
            fileName = new String(fileName.getBytes(StandardCharsets.UTF_8), StandardCharsets.ISO_8859_1);
        }

        // 3. 下载文件
        byte[] data = Files.readAllBytes(Paths.get(filePath));
        ByteArrayResource resource = new ByteArrayResource(data);

//        Map<String, Object> resultData = new HashMap<>();
//        resultData.put("resource", resource);
//        return Result.success(data);

        return ResponseEntity.ok()
                .header(HttpHeaders.CONTENT_DISPOSITION, "attachment;filename=" + fileName)
                .contentType(MediaType.APPLICATION_OCTET_STREAM).contentLength(data.length)
                .body(resource);
    }