title: How can I fetch an image in an intuitive way using Angular HttpClient?
body: <p>I have a backend that returns an image. I can call this backend fine in the browser. The image gets displayed, all OK.</p>
  
  <p>The response type is image/jpeg.</p>
  
  <p>Now, I'm investigating options for how I can fetch the image using Angular HttpClient.</p>
  
  <p>If I try to just issue a GET call, I can see the image downloaded fine in the Network tab of the browser.</p>
  
  <p>Angular, however, gives me an error:
  <a href="https://i.stack.imgur.com/wwoan.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/wwoan.png" alt="enter image description here"></a></p>
  
  <p>Code:</p>
  
  <pre class="lang-ts prettyprint-override"><code>import { Injectable } from '@angular/core';
  import { HttpClient, HttpHeaders } from '@angular/common/http';
  import { Observable } from 'rxjs';
  
  @Injectable({
    providedIn: 'root'
  })
  export class ThumbnailService {
    private thumbnailUrl = 'http://localhost:8080/thumbnail';
  
    constructor(private http: HttpClient) { }
  
    public findOne(classifiedId: number): Observable&lt;any&gt; {
      const httpOptions = {
        headers: new HttpHeaders({
          'Accept': 'image/jpeg',
        })
      };
      return this.http.get&lt;any&gt;(`${this.thumbnailUrl}/${classifiedId}`, httpOptions);
    }
  }
  </code></pre>
  
  <p>From what I understand...</p>
  
  <ul>
  <li>Angular tries to parse the response as JSON because of the  type</li>
  <li>There are lots of overloaded methods available for how to parse the response, depending on how I type the response</li>
  <li>If I use Blob as return type:</li>
  </ul>
  
  <pre class="lang-ts prettyprint-override"><code>import { Injectable } from '@angular/core';
  import { HttpClient, HttpHeaders } from '@angular/common/http';
  import { Observable } from 'rxjs';
  
  @Injectable({
    providedIn: 'root'
  })
  export class ThumbnailService {
    private thumbnailUrl = 'http://localhost:8080/thumbnail';
  
    constructor(private http: HttpClient) { }
  
    public findOne(classifiedId: number): Observable&lt;any&gt; {
      const httpOptions = {
        headers: new HttpHeaders({
          'Accept': 'image/jpeg',
        })
      };
      return this.http.get&lt;Observable&lt;Blob&gt;&gt;(`${this.thumbnailUrl}/${classifiedId}`, httpOptions);
    }
  }
  </code></pre>
  
  <p>I get the same error.</p>
  
  <p>Looking at the Blob type, it seems to have some structural expectations that I don't currently fulfill...</p>
  
  <p>Is there a simple(r) way to fetch an image using Angular HttpClient? Am I missing something?</p>
  
  <p>Setting the headers along with setting responseType results in compilation error, both with response typed as any and as Blob:</p>
  
  <blockquote>
    <p>Argument of type '{ headers: HttpHeaders; responseType: string; }' is not assignable to parameter of type '{ headers?: HttpHeaders | { [header: string]: string | string[]; }; observe?: "body"; params?: HttpParams | { [param: string]: string | string[]; }; reportProgress?: boolean; responseType?: "json"; withCredentials?: boolean; }'.
      Types of property 'responseType' are incompatible.
        Type 'string' is not assignable to type '"json"'.</p>
  </blockquote>