title: Angular 5 http GET images from back end
body: <p>I have an Angular 5 project.</p>
  
  <p>I need to display images in the UI that are fetched from the back end (say for example I want to display users' avatars in the upper toolbar, like in the SO toolbar above).</p>
  
  <p>The back end is a REST server that serves images when invoked on some end-point.</p>
  
  <p>I cannot seem to GET the images from the back end. And I am sure that the back end works.</p>
  
  <p>I have try to do the following (based on this <a href="http://brianflove.com/2017/11/02/angular-http-client-blob/" rel="nofollow noreferrer">article</a>): </p>
  
  <p>Here is my service <code>image.service.ts</code> (boiler plate has been removed)</p>
  
  <pre><code>getImage(url: string): Observable&lt;Blob&gt; {
    return this.httpClient.get(`${url}`, {responseType: 'blob'})
  }
  </code></pre>
  
  <p>Here is my coponent <code>image.component.ts</code></p>
  
  <pre><code>@Component({
    selector: 'app-image',
    templateUrl: './image.component.html',
    styleUrls: ['./image.component.css']
  })
  export class ImageComponent implements OnInit {
    @ViewChild('myImage') image: ElementRef
  
    constructor(private imageService: ImageService) {}
  
    ngOnInit() {
      this.getMyImage('http://my-super-host:3000/images/super-hero.png')
    }
  
    getMyImage(url: string): void {
      this.imageService.getImage(url)
        .subscribe(response =&gt; this.image.nativeElement.src = window.URL.createObjectURL(response))
    }
  }
  </code></pre>
  
  <p>And eventually, here is my <code>image.component.html</code></p>
  
  <pre><code>&lt;img #myImage&gt;
  </code></pre>
  
  <p>In the browser's console, there is an error message saying that </p>
  
  <pre><code>ERROR TypeError: _this.image is undefined
  </code></pre>
  
  <p>This solution doesn't work. What am I missing here?</p>