Angular - 从 API 中的 blob 绑定图像 url答案

【问题标题】：Angular - Binding image url from blob from APIAngular - 从 API 中的 blob 绑定图像 url
【发布时间】：2020-09-29 08:58:38
【问题描述】：

我正在尝试从我的 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 是“未定义”，然后我的图像 src 也是如此。

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

谢谢。

【问题讨论】：

标签： node.js angular api blob

【解决方案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)));
}

另外，还有一个类似的问题：How to return value inside subscribe Angular 4

【讨论】：