如何使用 Angular 4 在 Spring Boot 中顯示存儲的圖像？

Question

我正在使用 Spring Boot 和 Angular 4。我已將圖像上傳到項目位置。 當我嘗試查看上傳的圖像時，它沒有顯示，但會引發錯誤。 如何查看圖像？

ang.html：

<button type="button" class="button btn-info" 
                            (click)='showInfo()'>ShowImages</button>
                <div class="panel panel-primary">
                    <div class="panel-heading">List of Images</div>
                    <img [src]="fileUploads">
                </div>

組件.ts：

fileUploads: any;
  sid: number = 1;
  showInfo() {   
    this.drugservice.getFiles(this.sid).subscribe(data => {this.fileUploads = data, alert(data)}), err => {
      console.log('Error Occured showInfo');
    };
  }

服務.ts

getFiles(id: number): any {
  return this.http.get(this.getFileuploadedURL+'/'+id, { responseType: ResponseContentType.Blob }).map(
  (res) => {
      return new Blob([res.blob()], { type: 'image/png' })
  });
}

springBoot 控制器：

@GetMapping(value = "/getUploadfiles/{id}")
    @ResponseBody
    public byte[] getImage(@PathVariable Integer id) throws IOException {
        String filename = "01";
        System.out.println("id : " + id);
        File serverFile = new File(rootLocation + "\\" + filename + ".jpg");
        System.out.println("serverFile : " + serverFile);        
        return Files.readAllBytes(serverFile.toPath());
    }

Answer 1

嘗試將Spring Boot 控制器中的映射更新為：

@GetMapping(value = "/getUploadfiles/{id}", produces = MediaType.IMAGE_JPEG_VALUE)

這將表明返回的對象必須作為 JPEG 圖像處理。

在 Angular 中創建所需的圖像路徑並傳遞給 img 元素，例如：

組件.ts：

fileUrl = '/getUploadfiles/1';

ang.html：

<img [src]="fileUrl">