在angular中加载图像时显示加载图标

<div *ngIf="isLoading">
  <i class="fa fa-spinner fa-spin"></i> <!-- 使用Font Awesome图标库的加载图标 -->
</div>

<img *ngIf="!isLoading" [src]="imageUrl" alt="Image">

import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';
import { finalize } from 'rxjs/operators';

@Component({
  selector: 'app-image-loader',
  templateUrl: './image-loader.component.html',
  styleUrls: ['./image-loader.component.css']
})
export class ImageLoaderComponent implements OnInit {
  isLoading: boolean = true;
  imageUrl: string = '';

  ngOnInit() {
    this.loadImage().pipe(
      finalize(() => this.isLoading = false)
    ).subscribe(url => this.imageUrl = url);
  }

  loadImage(): Observable<string> {
    return new Observable<string>(observer => {
      const image = new Image();
      image.onload = () => {
        observer.next(image.src);
        observer.complete();
      };
      image.src = 'path/to/image.jpg'; // 替换为实际的图像URL
    });
  }
}

<div>
  <h1>My Image</h1>
  <app-image-loader></app-image-loader>
</div>