CODEWITHSUNDEEP
angularfirebase-storage
Dominik
Dominik

Reputation: 153

Angular img cannot load image from url

i try to get an image from Firebase storage download url. To do so i created this code:

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));
    });
}

If i change the url to a 'normal' url from google Pictures or anything else its working but if i use a storage url i receive this error:

ERROR Error: "Uncaught (in promise): Response with status: 0 for URL: null"

Upvotes: 0

Views: 313

Answers (1)

SiddAjmera
SiddAjmera

Reputation: 39432

Why not simply use

<img [src]="imageUrl" />

In the template?

Here's a Working Sample StackBlitz for your ref.

Upvotes: 1

Related Questions