img element does not stop loading when navigating to other components in angular

Question

I have an image on my component, that is showing a MJPEG.

<img *ngIf="imageUrl" src="{{imageUrl}}" />

When I navigate to another component, the request to the MJPEG is not cancelled. It is still loading the images.

I have already tried to set the imageUrl in ngOnDestroy to null, or to a static image. Also I tried, to set the html element directly

this.image.nativeElement.src = null;

None of that is working. The download is still running.

Answer 1

In you case Obervable must help. Request the image by url using HttpClient and then assign it to your <img>. Preserve the subscribtion and you will be able usubscribe it any time, which will cancel the request.