Angular - 从API的blob绑定图片url

问题描述 投票:0回答:1

我试图从我的API中抓取一个blob图片,并将其插入到img src中。

这是我的服务。

 public download(fileName: string) {
   this.http.get('http://x.x.x.x:4000/api/' + fileName, { responseType: 'blob'}).subscribe(res => {
    console.log( "TEST 1: " + window.URL.createObjectURL(res) ) ;
    return window.URL.createObjectURL(res);
   });
 }

这是我的.ts文件

export class FileListComponent {

 public pictureSrc;
 public fileList$: Observable<string[]> = this.fileService.list();

 constructor(private fileService: FileService) { }

 public download(fileName: string):  void {
  console.log ("TEST 2: " + this.fileService.download(fileName));
  this.pictureSrc = this.fileService.download(fileName);
 }

和我的.html文件

   <img src="{{ pictureSrc }}">

当我运行这个时,它在TEST 1中抓取了正确的blob url,但TEST 2是 "undefined",然后我的图片src也是如此。

任何想法,为什么url不会从我的服务到我的.ts文件?

谢谢。

node.js angular api blob
1个回答
0
投票

是的,因为要在订阅里面返回URL。试试这个。

public download(fileName: string) {
    return this.http.get('http://x.x.x.x:4000/api/' + fileName, { responseType: 'blob'}).pipe(
        map(res => window.URL.createObjectURL(res)));
}

另外,这里有一个类似的问题: 如何在订阅里面返回值 Angular 4

© www.soinside.com 2019 - 2024. All rights reserved.