如何在angular2中使用微调器加载图像

ng generate component spinner

.spinner {
  border: 4px solid rgba(0, 0, 0, 0.1);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border-left-color: #09f;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

<div class="spinner"></div>

<img *ngIf="!isLoading" [src]="imageUrl" (load)="onImageLoad()" (error)="onImageError()" />
<app-spinner *ngIf="isLoading"></app-spinner>

import { Component } from '@angular/core';

@Component({
  selector: 'app-image-loader',
  templateUrl: './image-loader.component.html',
  styleUrls: ['./image-loader.component.css']
})
export class ImageLoaderComponent {
  imageUrl = 'path/to/your/image.jpg';
  isLoading = true;

  onImageLoad() {
    this.isLoading = false;
  }

  onImageError() {
    this.isLoading = false;
    // Handle the error, maybe show a placeholder or an error message
  }
}