我制作了一个返回图像 URL 的 API。我使用 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
在图像渲染之前执行。
我也尝试在 subscribe
之外编写 alert
,但 alert
仍然首先执行。
最佳答案
您可以使用load
事件,例如
<img id="file-image" [src]="imageUrl" alt="Preview" (load)="onImageLoad()" usemap="shapes-map">
ts部分
onImageLoad(){
alert("loaded")
}
关于angular - 从 API 加载图像后如何对图像执行任何操作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58298400/