I am trying to find out the logo dimensions, since different clients can upload different logos. The HTML is like this:

<img [src]="layoutResponseModel?.clientLogo" alt="">

How can I get width and height of this image in Angular 5? Found a few JS examples but couldn't make it work

I am trying to find out the logo dimensions, since different clients can upload different logos. The HTML is like this:

<img [src]="layoutResponseModel?.clientLogo" alt="">

How can I get width and height of this image in Angular 5? Found a few JS examples but couldn't make it work

• javascript
• angular

Share Follow edited Jul 10, 2018 at 8:29 mplungjan 179k2828 gold badges182182 silver badges240240 bronze badges asked Jul 10, 2018 at 8:25 Nemanja GrabovacNemanja Grabovac 87822 gold badges1717 silver badges3030 bronze badges 1

• Post what you tried and tell use how it did not work – mplungjan Commented Jul 10, 2018 at 8:30

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 12

Give your image a template variable a load hook :

<img [src]="layoutResponseModel?.clientLogo" alt="" #logo (load)="onLoad()">

Reference it in your ponent :

@ViewChild('logo') logo: ElementRef;

Write your load hook :

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

This will give you the width of the displayed image.

Working stackblitz