“Can Angular retrieve an Image from an Azure blob without an Error?”

I am trying to retrieve an image from Azure blob, but I am getting a 403 response with the following message,

"403 Server failed to authenticate the request. Make sure the value of Authorization header is formed correctly including the signature."

Following is the code I used to retrieve the image

public getBase64Image(): Observable<string>{
    return this.http.get(environment.receiptLogoUrl, { responseType: 'blob' })
      .pipe(
        switchMap((blob: Blob) => {
          return new Observable<string>((observer) => {
            const reader = new FileReader();
            reader.readAsBinaryString(blob);
            reader.onloadend = () => {
              const base64data = btoa(reader.result as string);
              observer.next(`data:image/png;base64,${base64data}`);
              observer.complete();
            };
          });
        })
      );
  }

How should this issue be fixed?