Angular

Question

我想将 API 端点称为 returns 类型的文档：content-type image/png 我使用 RapidAPI: https://rapidapi.com/apidojo/api/divanscore/ 这是终点：players/get-image

如何在 html 中显示前一个 API 端点返回的图像？

这是player.service:

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

Answer 1

转换 blob。然后对其进行清理并将其嵌入到 dom。抱歉，我无法使用 rapidApi 示例，我没有 API 密钥或播放器 ID。但我希望这会有所帮助：

<img [src]="currVerifiedLoanOfficerPhoto">

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  name = 'Download image blob and use on template';
  currVerifiedLoanOfficerPhoto: any;

  constructor(private http: HttpClient, protected sanitizer: DomSanitizer) {}

  ngOnInit() {
    this.http
      .get(
        'https://upload.wikimedia.org/wikipedia/commons/thumb/c/cf/Angular_full_color_logo.svg/250px-Angular_full_color_logo.svg.png',
        { responseType: 'blob' }
      )
      .pipe(switchMap((blob) => this.convertBlobToBase64(blob)))
      .subscribe((base64ImageUrl: string) => {
        console.log(base64ImageUrl);
        this.currVerifiedLoanOfficerPhoto =
          this.sanitizer.bypassSecurityTrustResourceUrl(base64ImageUrl);
      });
  }

  convertBlobToBase64(blob: Blob) {
    return Observable.create((observer) => {
      const reader = new FileReader();
      const binaryString = reader.readAsDataURL(blob);
      reader.onload = (event: any) => {
        // console.log('Image in Base64: ', event.target.result);
        observer.next(event.target.result);
        observer.complete();
      };

      reader.onerror = (event: any) => {
        console.log('File could not be read: ' + event.target.error.code);
        observer.next(event.target.error.code);
        observer.complete();
      };
    });
  }
}

这是一个工作示例：https://stackblitz.com/edit/read-image-from-url-and-convert-it-in-base-64-t98e2b?file=src%2Fapp%2Fapp.component.ts

Angular - 如何显示图像？

Angular - How can I display an image?

get

image

display