typescript - Angular <img src> Dimensiunea maximă a stivei apelurilor depășită

Încărc niște imagini de la un serviciu așa cum s-a sugerat în acest thread, dar uneori primesc eroarea Maximum call stack size exceeded. Folosesc Angular 7, am încercat să schimb opțiunea load în

reader.addEventListener("load", () => {

cu loadend sperând că se va declanșa într-un mod diferit, dar am descoperit că nu este diferit de load, însă se va declanșa și atunci când încărcarea eșuează.

Iată eroarea completă din consolă:

ERROR RangeError: Maximum call stack size exceeded
    at String.match (<anonymous>)
    at _sanitizeUrl (core.js:11206)
    at DomSanitizerImpl.push../node_modules/@angular/platform-browser/fesm5/platform-browser.js.DomSanitizerImpl.sanitize (platform-browser.js:1817)
    at setElementProperty (core.js:21108)
    at checkAndUpdateElementValue (core.js:21060)
    at checkAndUpdateElementInline (core.js:21007)
    at checkAndUpdateNodeInline (core.js:23358)
    at checkAndUpdateNode (core.js:23324)
    at debugCheckAndUpdateNode (core.js:23958)
    at debugCheckRenderNodeFn (core.js:23944)

Editează adăugând codul solicitat:

  getMainImageFromService() {
    this.mainImageLoading = true;
    this.vehicleImageWebService.getImage('1').subscribe(data => {
      this.createImageFromBlob(data);
      this.mainImageLoading = false;
    }, error => {
      this.mainImageLoading = false;
      console.log(error);
    });
  }
  createImageFromBlob(image: Blob) {
    const reader = new FileReader();
    reader.addEventListener('loadend', () => {
      this.mainImage = reader.result;
    }, false);

    if (image) {
      reader.readAsDataURL(image);
    }
  }

Editare2:

<img [src]="mainImage" style="max-width: 100%" *ngIf="!mainImageLoading && mainImage">