title: Angular Getting a picture on and on from REST API and displaying it
body: <p>I am about creating a site, which will be displaying image took from driving car on a screen of computer in real-time.
  I am sending a picture by Insomnia like this (I have not a server, yet):</p>
  
  <p><a href="https://i.stack.imgur.com/nXoz5.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/nXoz5.png" alt="Insomnia"></a></p>
  
  <p>and there is a code from Angular:</p>
  
  <p><strong>video-streaming.service.ts</strong></p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import { HttpClient } from '@angular/common/http';
  import { Observable } from 'rxjs';
  
  @Injectable({
    providedIn: 'root'
  })
  export class VideoStreamingService {
  
    constructor(private http: HttpClient) { }
  
    getFiles(url: string): Observable&lt;any&gt; {
      return this.http.get(url); // 'http://localhost:8080/api/file/all' anykind
    }
  }
  </code></pre>
  
  <p><strong>video-streaming.component.ts</strong></p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { VideoStreamingService } from './video-streaming.service';
  
  
  @Component({
    selector: 'app-video-streaming',
    templateUrl: './video-streaming.component.html',
    styleUrls: ['./video-streaming.component.css']
  })
  export class VideoStreamingComponent implements OnInit {
  
    image: any;
    constructor(private videoStreamingService: VideoStreamingService) { }
  
    ngOnInit() {
      this.getImage('https://192.168.0.102:8080/image');
    }
  
    getImage(url: string): void {
      this.videoStreamingService.getFiles(url)
        .subscribe(image =&gt; {
          this.image = image;
        });
    }
  }
  </code></pre>
  
  <p>and the <strong>HTML template</strong>:</p>
  
  <pre><code>&lt;img src={{image}}&gt;
  </code></pre>
  
  <p>Only <strong>ERROR</strong> what I get from console is:</p>
  
  <pre><code>GET https://192.168.0.102:8080/image net::ERR_CONNECTION_TIMED_OUT
  </code></pre>
  
  <p>What am I doing wrong?</p>
  
  <p><strong>@UPDATE</strong></p>
  
  <p>I did change the line</p>
  
  <pre><code>this.getImage('https://192.168.0.102:8080/image');
  </code></pre>
  
  <p>to this:</p>
  
  <pre><code>this.getImage('http://localhost:8080/image');
  </code></pre>
  
  <p>and also the address in Insomnia to: <a href="http://localhost:8080/image" rel="nofollow noreferrer">http://localhost:8080/image</a></p>
  
  <p>There are more errors, details below.</p>
  
  <p>Angular errors in console:</p>
  
  <p><a href="https://i.stack.imgur.com/1gR4y.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/1gR4y.png" alt="enter image description here"></a></p>
  
  <p>Insomnia errors:</p>
  
  <p><a href="https://i.stack.imgur.com/1oLwE.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/1oLwE.png" alt="enter image description here"></a></p>