Question

我有一个Angular 5项目。

我需要在UI中显示从后端获取的图像（例如，我想在上方工具栏中显示用户＆＃39;头像，如上面的SO工具栏中所示）。

后端是一个REST服务器，在某个端点上调用时可以提供图像。

我似乎无法从后端获取图像。我确信后端有效。

我尝试执行以下操作（基于此article）：

这是我的服务image.service.ts（锅炉板已被移除）

getImage(url: string): Observable<Blob> {
  return this.httpClient.get(`${url}`, {responseType: 'blob'})
}

这是我的伙伴image.component.ts

@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 => this.image.nativeElement.src = window.URL.createObjectURL(response))
  }
}

最终，这是我的image.component.html

<img #myImage>

在浏览器的控制台中，出现错误消息

ERROR TypeError: _this.image is undefined

此解决方案无效。我在这里缺少什么？

Answer 1

添加简单的

<img src={{url}}>

做了这个伎俩。

从那时起，您可以根据需要添加*ngIf，class，alt ....

Answer 2

其他人讨论的另一种稍微不同的解决方案：

[https://medium.com/techinpieces/blobs-with-http-post-aand-angular-5-a-short-story-993084811af4][1]

基于此，我编写了与Angular 7兼容的代码。有关更多信息，请参见上面的链接。

 getBlob_withQueryParams(imageUrl: string, params: HttpParams):  Rxjs.Observable<Blob> {
     const headers = new HttpHeaders({
       'Content-Type': 'application/json',
       'Accept': 'application/json'
     });
    return this._http.get<Blob>(imageUrl, {headers: headers, params: params, responseType: 'blob' as 'json' });
  }

来自后端的Angular 5 http GET图像

2 个答案: