角度 - 从 API 绑定来自 blob 的图像 URL

Question

我正在尝试从我的 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 }}">

当我运行它时，它会在测试 1 中获取正确的 blob URL，但测试 2 是"未定义的"，然后我的图像 src 也是如此。

知道为什么 url 不会从我的服务传输到我的 .ts 文件吗？

谢谢。

Answer 1

是的，因为返回订阅中的 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 中返回值