Angular 从 REST API 获取图片并显示它答案

【问题标题】：Angular Getting a picture on and on from REST API and displaying itAngular 从 REST API 获取图片并显示它
【发布时间】：2019-12-14 19:04:15
【问题描述】：

我正在创建一个网站，它将在计算机屏幕上实时显示驾驶汽车拍摄的图像。我正在通过 Insomnia 发送这样的图片（我还没有服务器）：

还有来自 Angular 的代码：

video-streaming.service.ts

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<any> {
    return this.http.get(url); // 'http://localhost:8080/api/file/all' anykind
  }
}

video-streaming.component.ts

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 => {
        this.image = image;
      });
  }
}

和 HTML 模板：

<img src={{image}}>

只有 ERROR 我从控制台得到的是：

GET https://192.168.0.102:8080/image net::ERR_CONNECTION_TIMED_OUT

我做错了什么？

@UPDATE

我确实换了行

this.getImage('https://192.168.0.102:8080/image');

到这里：

this.getImage('http://localhost:8080/image');

还有 Insomnia 的地址：http://localhost:8080/image

还有更多错误，详情如下。

控制台中的角度错误：

失眠错误：

【问题讨论】：

后端控制台有错误吗？或者详细的http错误信息是什么？
你不需要 CORS 实现吗？
我只使用 Insomnia，我无法实现 CORS。检查顶部我的帖子上的@update。谢谢！
在 localhost:8080 是否有服务监听？
您在 chrome-console> 网络选项卡中看到了什么？另外，当您在浏览器的单独选项卡中访问 url:localhost:8080/image 时会看到什么？

标签： angular image get insomnia

【解决方案1】：

您收到 TIMEOUT 错误，因为在网络中未找到提供的 api url，并且搜索它已超时。

此 IP 地址是 wifi 路由器提供的动态 IP 地址。

如果您从本地机器访问图像，请使用此地址

http://localhost:8080

不要在 http 上使用 https 使用

https 是域安全的时候。

【讨论】：

我不知道如何添加带有大描述的评论，所以我将编辑问题页面