(Angular 5) javascript Image onload in angular

Question

I want to use Image.onload = function () {} in angular

my code

loadImage(path) {
  this.loadedImage = new Image();
  this.loadedImage.crossOrigin = "Anonymous";
  this.loadedImage.src = path;

  this.loadedImage.onload = function () {
    this._PreviewHelper.changeModelTexture(this.model, this.loadedImage);     
  }
}

Is there a way to use this event on angular.

Any help would be greatly appreciated.

Answer 1

Try to make use of the angular built in functionality if you can.

In the loadImage function

this.imageSrc = path;  

Create a function to be called on image load

onImageLoad() {
    // Do what you need in here
}

And in the template:

<img [src]="this.imageSrc" (load)="onImageLoad()" />

Answer 2

onload is called if a proper image path is given.

If it still doesn't work then check 1) Where are calling the method loadImage ? 2) Is there any issue with the preview helper line

Edit 1:

If you are using function then try the below:

this.loadedImage.onload = function() {
    let that = this;
    that._PreviewHelper.changeModelTexture(that.model, that.loadedImage);     
}

Otherwise, try this: (https://stackblitz.com/edit/angular-rzlmee)

this.loadedImage.onload = () => {
    this._PreviewHelper.changeModelTexture(this.model, this.loadedImage);     
  }