Angular img 无法从 url 加载图像

Question

我尝试从 Firebase 存储下载 url 获取图像。为此，我创建了以下代码：

ngOnInit(): void {
  const imageUrl = 'https://firebasestorage.googleapis.com/v0/b/heimatvoll-1785b.appspot.com/o/Blogs%2FBasic%20Blog%20Banner%2Fcook-366875_1280.jpg?alt=media&token=bb08b895-55c4-404d-aedc-1a77fceacf74';

  this.http.get(imageUrl, {
      responseType: ResponseContentType.Blob
    })
    .toPromise()
    .then((res: any) => {
      const blob = new Blob([res._body], {
        type: res.headers.get('Content-Type')
      });

      const urlCreator = window.URL;
      this.imageData = this.sanitizer.bypassSecurityTrustUrl(
        urlCreator.createObjectURL(blob));
    });
}

如果我将 url 更改为 google Pictures 中的“正常”url 或其他任何工作但如果我使用存储 url 我收到此错误：

错误错误：“未捕获（承诺中）：响应状态：0 对于 URL：null”

Answer 1

为什么不简单地使用

<img [src]="imageUrl" />

在模板中？

---

这里有一个Working Sample StackBlitz 供您参考。