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，但是如果我使用存储url，则会收到此错误：

  

错误错误：“未捕获（承诺）：状态为0的响应：URL：空”

Answer 1

为什么不简单使用

<img [src]="imageUrl" />

在模板中？

---

  

这是您推荐的Working Sample StackBlitz。