Как выполнить какое-либо действие с изображением после его загрузки из API

Question

Я создал API, который возвращает URL изображения. Используя Angular 8, я рендеринг этого изображения. До этого все работает нормально.

Я хочу выполнить функцию после рендеринга этого изображения. Я пишу это действие, но оно выполняется до , когда изображение отображается. Можно ли как-нибудь выполнить эту функцию после рендеринга этого изображения?

<div id="viewPng" class="uploader">
     <img id="file-image" [src]="imageUrl" alt="Preview" usemap="shapes-map">
     <map name="shapes-map">
          <area shape="rect" title="Square" coords="235, 758, 1126, 942" href="/wp-conF,<nt/uploads/square.png" target="_blank" />
     </map>
</div>

this._pvgfpService.pdfToPng(formData).subscribe(data => {
  this.imageUrl = "https://www.google.com/imgres?imgurl=https%3A%2F%2Fd2eip9sf3oo6c2.cloudfront.net%2Ftags%2Fimages%2F000%2F000%2F300%2Ffull%2Fangular2.png&imgrefurl=https%3A%2F%2Fegghead.io%2Fcourses%2Fget-started-with-angular&docid=f68td0wdokO9hM&tbnid=yBO6E6F_jZlf5M%3A&vet=10ahUKEwioiY7Mx47lAhWj6XMBHWtFC7MQMwhoKAEwAQ..i&w=800&h=800&bih=669&biw=1299&q=Angular%20Image&ved=0ahUKEwioiY7Mx47lAhWj6XMBHWtFC7MQMwhoKAEwAQ&iact=mrc&uact=";
  alert("Hello World");
});

Здесь я получаю значение imageUrl, оно должно отрисовывать изображение переднему концу, а затем онодолжен выполнить alert, но alert выполняется перед рендерингом изображения.

Я также пытался записать alert за пределами subscribe, но alert все еще выполняется первым.

Answer 1

Вы можете использовать load событие, например

<img id="file-image" [src]="imageUrl" alt="Preview" (load)="onImageLoad()" usemap="shapes-map">

ts part

onImageLoad(){
alert("loaded")
}

demo