title: How to display stored images in Spring Boot using Angular 4?
body: <p>I am using Spring Boot and Angular 4.
  I have uploaded an image to the project location.
  When I try to view the uploaded image, it is not displayed but an error is thrown. 
  How can I view the image?</p>
  
  <p><strong>ang.html:</strong></p>
  
  <pre><code>&lt;button type="button" class="button btn-info" 
                              (click)='showInfo()'&gt;ShowImages&lt;/button&gt;
                  &lt;div class="panel panel-primary"&gt;
                      &lt;div class="panel-heading"&gt;List of Images&lt;/div&gt;
                      &lt;img [src]="fileUploads"&gt;
                  &lt;/div&gt;
  </code></pre>
  
  <p><strong>components.ts:</strong></p>
  
  <pre><code>fileUploads: any;
    sid: number = 1;
    showInfo() {   
      this.drugservice.getFiles(this.sid).subscribe(data =&gt; {this.fileUploads = data, alert(data)}), err =&gt; {
        console.log('Error Occured showInfo');
      };
    }
  </code></pre>
  
  <p><strong>service.ts</strong></p>
  
  <pre><code>getFiles(id: number): any {
    return this.http.get(this.getFileuploadedURL+'/'+id, { responseType: ResponseContentType.Blob }).map(
    (res) =&gt; {
        return new Blob([res.blob()], { type: 'image/png' })
    });
  }
  </code></pre>
  
  <p><strong>springBoot Controller:</strong></p>
  
  <pre><code>@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());
      }
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/TjtQt.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/TjtQt.png" alt="enter image description here"></a></p>