typescript - Angular <img src> Maksimum çağrı yığını boyutu aşıldı

Bu konudaki önerildiği gibi bir hizmetten bazı görüntüleri yüklüyorum ama bazen Maksimum çağrı yığını boyutu aşıldı hatası alıyorum. Angular 7 kullanıyorum, load seçeneğini değiştirmeyi denedim

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

loadend ile farklı şekilde tetikleneceğini umarak denedim, ama bunun load’dan farklı olmadığını, sadece yükleme başarısız olduğunda da tetikleneceğini fark ettim.

İşte konsoldaki tam hata:

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)

İstenilen kodu ekleyerek düzenle:

  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);
    }
  }

Düzenleme2:

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