[英]How to display stored images in Spring Boot using Angular 4?
I am using Spring Boot and Angular 4. I have uploaded an image to the project location.我正在使用 Spring Boot 和 Angular 4。我已将图像上传到项目位置。 When I try to view the uploaded image, it is not displayed but an error is thrown.
当我尝试查看上传的图像时,它没有显示,但会引发错误。 How can I view the image?
如何查看图像?
ang.html: 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:组件.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服务.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 Controller: 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());
}
Try updating your mapping in spring boot controller to:尝试将Spring Boot 控制器中的映射更新为:
@GetMapping(value = "/getUploadfiles/{id}", produces = MediaType.IMAGE_JPEG_VALUE)
this will indicate that the returned object must be handled as a JPEG image.这将表明返回的对象必须作为 JPEG 图像处理。
In Angular create the required path to image and pass is to the img element, eg:在 Angular 中创建所需的图像路径并传递给 img 元素,例如:
components.ts:组件.ts:
fileUrl = '/getUploadfiles/1';
ang.html: ang.html:
<img [src]="fileUrl">
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.