typescript - Angular <img src> Maximal storlek på anropsstack överskriden

Jag laddar några bilder från en tjänst som föreslogs i denna tråd men ibland får jag felet Maximal storlek på anropsstacken överskriden. Jag använder Angular 7, jag försökte ändra load-alternativet i

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

med loadend i hopp om att det ska utlösas på ett annat sätt, men jag upptäckte att det inte skiljer sig från load, men det kommer också att utlösas när laddningen misslyckas.

Här är hela felet i konsolen:

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)

Redigera genom att lägga till begärd kod:

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

Redigera2:

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