Angular: Image reloads on click when innerHTML is used and caching is disabled

Question

I have setup a very simple example here: https://stackblitz.com/edit/angular-6rcn6c

 clickMe(){
    console.log('what is going on');
  }

  getImage(){
    const _image = '<img src="https://icon-library.net/images/happy-icon/happy-icon-27.jpg">';
    return this.sanitizer.bypassSecurityTrustHtml(_image);

  }

And

<button (click)="clickMe()">Click me</button>
<div [innerHTML]="getImage()"></div>

When I have an innerHTML bound element that has an image, and then there is another button elsewhere, if caching is disabled (simply opening the Network tab in dev tools) when clicking on the button, the div looks like it is re-bound, and the network tab shows the image reloaded. This happens on chrome (and Edge dev) but not on Firefox.

A video in case it doesn't happen on your machine: https://drive.google.com/file/d/1f0v3jBy8Bvuv_5JVV1HHvQHipAo2_Ok3/view

EDIT One additional notice is that this behavior is persistent when an iframe with a youtube video inside, on both Chrome and FireFox, with or without caching, the network tab shows the youtube video has reloaded on every click event.

Do you know the explanation for this behavior?

Answer 1

As a heads up for the next person stumbling over this problem.

This seems to already have been solved by a different question, or at least it solved the problem for me:

Iframe doesn't stop from reloading in Angular loop

Essentially with every click or scroll it feels like the innerHtml is updated, causing it to call the method a new and thus refreshing the entire content.