有没有办法知道图像是否已加载到 Angular 的 dom 中

Question

我实际上正在研究 Angular，我想知道是否有办法知道图像是否已正确加载到 dom 中。我尝试使用this.image.nativeElement.width，但宽度是在图像加载之前发送的。

超文本标记语言

<img #image [src]="imagePath">

TS

@ViewChild('image', {static: true})
  image: ElementRef<HTMLImageElement>;

Answer 1

您可以通过两种方式完成此操作：

使用 AfterViewInit 并访问元素

@ViewChild('image')
  public img: ElementRef;

  ngAfterViewInit() {
    const image: HTMLImageElement = this.img.nativeElement;

    image.onload = () => {
      console.log('image loaded');
    };
  }

使用（加载）事件

<img #image [src]="imagePath" (load)="functionAfterLoad()">

https://stackblitz.com/edit/rotate-image-bdqndf?file=app/app.component.ts