角度<img src>超出最大调用堆栈大小

时间:2019-06-21 09:53:28

标签: angular typescript

我正在从thread中建议的服务中加载一些图像,但有时会出现错误Maximum call stack size exceeded。 我使用的是Angular 7,我尝试更改

中的load选项
reader.addEventListener("load", () => {

使用loadend希望它将以不同的方式触发,但我发现它与load并没有什么不同,但也会在加载失败时触发。

这是控制台中的完整错误:

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)

编辑添加请求的代码:

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

Edit2:

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

0 个答案:

没有答案