Html angular4动态图像src问题

我有一个

img

标记，它是动态填充的

src

<img [src]="dynamicUrl" loader >

loader

是我执行的指令

constructor(private el: ElementRef, private renderer: Renderer2) { }

ngAfterViewInit() {
  let loadingBackground = `background:url("${this.loadingImg}") 50% no-repeat`;
  this.renderer.setAttribute(this.el.nativeElement, "style", loadingBackground);

  this.el.nativeElement.onerror = () => {
     // set the error icon as background
     let errorBackground = `background:url("${this.errorImg}") 50% no-repeat`;
     this.renderer.setAttribute(this.el.nativeElement, "style", errorBackground);
  };
}

现在，当指令被调用并且控件转到

ngAfterViewInit

时，它将

loadingImg

gif设置为背景，并且loader在屏幕上显示毫秒。由于

dynamiccurl

的默认值是一个空字符串（因此

src

解析为（“”），因此它还显示带有加载程序的缺失图像图标，并进入

onerror

方法，并将

errImg

设置为背景，因此错误图像在屏幕上可见

现在将填充

defaultUrl

值get it original value，以便实际图像可见

---

如何显示解决此问题，我只想显示加载程序图像，直到实际图像下载到浏览器中。

您可以将加载程序指令放入div元素中

<div loader *ngIf="dynamicUrl == null || dynamicUrl == ''"> </div>

<img [src]="dynamicUrl" *ngIf="dynamicUrl !=null && dynamicUrl != ''">

<div loader *ngIf="dynamicUrl == null || dynamicUrl == ''"> </div>

<img [src]="dynamicUrl" *ngIf="dynamicUrl !=null && dynamicUrl != ''">