Myujth

I have an Ionic 3 App where I am loading some image from an API server. In the client-side I want to know if the image is fetched or loaded successfully and I also want to know if there are any errors on fetching.

Here is the sample that I created using pure html with angular template without any js.

<img hidden [src]="driverInfo?.user_avatar?.url | image:'original'" (load)="this.loadingImage = false">
<img [src]="driverInfo?.user_avatar?.url | image:'original'" *ngIf="!loadingImage" onError="this.src='assets/imgs/avatar-placeholder.png';" />

When I only use the second line of code below and transfer the (load) event there. The onError path shows first which is not because the image is still loading. I want to show a spinner or loader when the image is loading. Then when the image has loaded show the original path if it succeed if not show the path in the onError.

So I know this code is not good at all. That's why I am trying to solve here. I just created a workaround code that achieves my goal but not in a good practice.

So in the first line of the code. I displayed a hidden html file. The purpose of this code is only to trigger if the image is loaded and in the second line is where the actual image is displayed if it is fetched successfully or show some error or image placeholder if not.

So how can I refactor this using Angular JS? Will I use ViewChild with ElementRef to achieve this?

Appreciate if someone could help. Thanks in advance.

I think you can achieve something like what you want using the following construction:

<img #thisImage src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" failedUrl="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" (error)="missingImage(thisImage.attributes.failedUrl.value)" onerror="this.src='https://via.placeholder.com/150'"/>

Here is stackblitz to play around: https://stackblitz.com/edit/ionic-szz3nc

In short:

1. you want to assign additional attribute that will duplicate original value of 'src', I used 'failedUrl' as such. This is because on error src will get replaced with your placeholder safe url.




2. Now onerror - you want to replace failed url with placeholder




3. using (error) binding you can call a method and pass whatever you need to a ts function to act further (like I used to "report" such missing images).

Let me know if this is helpful.

Please note this type of code is super risky as if you make a mistake this can cause error loop (like if your safe placeholder url is also pointing nowhere).