Question

我有一个img标记，其中src是动态填充的。

<img [src]="dynamicUrl" loader >

dynamicUrl是一个填充了ajax调用结果的变量。

dynamicUrl:string ="";

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设置为背景，并且加载器在屏幕上显示毫秒。由于dynamicUrl的默认值为空字符串（因此src已解析为（＆＃34; http://localhost:3000/＆＃34;））因此它还会显示带有加载程序的图像图标缺失在onerror方法中，将errImg设置为背景，以便在屏幕上显示错误图片。

现在defaultUrl值会使其填充原始值，以便显示实际图像。

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

Answer 1

您可以将loader指令放在div元素中;

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

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

angular4动态图像src问题

1 个答案: