I am currently utilizing Spring Boot in combination with Angular 4. The issue I am facing involves uploading an image to the project location. However, upon attempting to view the uploaded image, it does not display correctly and instead throws an error. How can I go about fixing this problem?
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 Controller:
@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());
}