如何使用 Angular 4 在 Spring Boot 中显示存储的图像?

Posted

技术标签:

【中文标题】如何使用 Angular 4 在 Spring Boot 中显示存储的图像?【英文标题】:How to display stored images in Spring Boot using Angular 4? 【发布时间】:2018-07-22 12:46:27 【问题描述】:

我正在使用 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>

components.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');
    ;
  

service.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());
    

【问题讨论】:

【参考方案1】:

尝试将 spring boot 控制器中的映射更新为:

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

这将表明返回的对象必须作为 JPEG 图像处理。

在 Angular 中创建所需的图像路径并传递给 img 元素,例如:

components.ts:

fileUrl = '/getUploadfiles/1';

ang.html:

<img [src]="fileUrl">

【讨论】:

嘿,非常感谢

以上是关于如何使用 Angular 4 在 Spring Boot 中显示存储的图像?的主要内容,如果未能解决你的问题,请参考以下文章

如何使用 Angular -> Spring Boot Oauth2 -> Keycloak 获取 keycloak 令牌

Spring + Angular:如何以角度解析 ResponseEntity?

如何使用 Spring Security + Angular 登录/验证

如何使用spring boot和angular 2登录

Angular 4/5 + Spring Boot + Oauth2 支持

如何使用 Angular 消除 Spring Boot 中的 CORS 错误? [复制]