I have a get request that returns a picture of a player, but if there is no picture for actual player I get an error code of 403 and nothing is displayed.

How to solve this?

This is the service:

public GetPlayerImage(id: number): Promise<Blob>{
    return  this.http.get<Blob>('https://divanscore.p.rapidapi.com/players/get-image?playerId='   id, {
      headers: {
        'x-rapidapi-host': 'divanscore.p.rapidapi.com',
        'x-rapidapi-key': 'XXXX'
      },
      responseType: 'blob' as 'json'
    }).toPromise();
  }

This is the component.ts:

ngOnInit(): void {
    this.route.queryParams.subscribe(async (params) => {

      if (params.playerId !== null && params.playerId !== undefined) {
        this.player = await this.playerService.GetOnePlayer(params.playerId);
        this.playerClub = await this.playerService.GetOnePlayerClub(params.clubId);
        await this.getImageFromService();
        this.isLoading = false;
      }
    });
  }

createImageFromBlob(image: Blob) {
    let reader = new FileReader();
    reader.addEventListener('load', () => {
      this.imageToShow = reader.result;
    }, false);

    if (image) {
      reader.readAsDataURL(image);
    }
  }

  async getImageFromService() {
    this.createImageFromBlob(await this.playerService.GetPlayerImage(this.player.playerId));
  }

UPDATE

It now displays, but it is still red in the console and indicates an error ... how can this be fixed?

Image

CodePudding user response：

First. Do you have any interceptor?

if not, we can catch like:

async getImageFromService() {
   const imageContent = await this.playerService.GetPlayerImage(this.player.playerId).catch((error) => {
       // error will come here.
   })

   this.createImageFromBlob(content);
  }

or you can try/catch

async getImageFromService() {
   try {
     const imageContent = await this.playerService.GetPlayerImage(this.player.playerId);
     this.createImageFromBlob(content);

   } catch (error) {
     // the error will be there
   }
  }