如何在 Angular 中获取图像的实际大小并调整大小？

Question

There is an image:

@ViewChild('image')
readonly image: ElementRef;

Html:

 <img #image class="image" />

How to get real size (width, height) and resized size after autofit by CSS?

I have tried this:

  console.log(this.container.nativeElement.clientHeight);
  console.log(this.container.nativeElement.clientWidth);

It returns me 500 and 0.

Answer 1

try this:

<img #image src="images/path" class="image" (load)="onLoad()" />

in controller

onLoad() {
  console.log((this.image.nativeElement as HTMLImageElement).width);
  console.log((this.image.nativeElement as HTMLImageElement).height);
}

demo: https://stackblitz.com/edit/angular-rqceml?file=src/app/app.component.ts

Answer 2

You can try with this:

 console.log((this.container.nativeElement as HTMLImageElement).naturalWidth); console.log((this.container.nativeElement as HTMLImageElement).naturalHeight);