Typescript - Check if image src has been fetched and call a function

Question

I have the following element on my page:

<img src="https://i.pinimg.com/736x/2c/9d/07/2c9d0704ae49dfde914e2b477bf9279c--stick-figure-profile-pictures.jpg" />

How can I check when the src has been successfully fetched and call a function after that?

Answer 1

This should do it:

<img src="https://i.pinimg.com/736x/2c/9d/07/2c9d0704ae49dfde914e2b477bf9279c--stick-figure-profile-pictures.jpg" (load)="myFunction()"/>

Note the (load)="myFunction()" at the end (the way the content scrolls when it is code is slightly funky).

Answer 2

Here is an answer,Let try this once,

html file,

<img [src]="imagesource" (load)="doSomething()">
<!--(or)-->
<img src="https://i.pinimg.com/736x/2c/9d/07/2c9d0704ae49dfde914e2b477bf9279c--stick-figure-profile-pictures.jpg" (load)="doSomething()">

Typescript file,

imagesource="https://i.pinimg.com/736x/2c/9d/07/2c9d0704ae49dfde914e2b477bf9279c--stick-figure-profile-pictures.jpg";

doSomething(){
   console.log("Loaded");
   //do your stuff
}

For more reference visit here

Detect when image has loaded in img tag