title: angular4 dynamic image src issue
body: <p>I have an <code>img</code> tag is which <code>src</code> populated dynamically.</p>
  
  <pre><code>&lt;img [src]="dynamicUrl" loader &gt;
  </code></pre>
  
  <p><code>dynamicUrl</code> is a variable that is populated with an ajax call's result.</p>
  
  <pre><code>dynamicUrl:string ="";
  </code></pre>
  
  <p><code>loader</code> is a directive in which I have done </p>
  
  <pre><code>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 = () =&gt; {
       // set the error icon as background
       let errorBackground = `background:url("${this.errorImg}") 50% no-repeat`;
       this.renderer.setAttribute(this.el.nativeElement, "style", errorBackground);
    };
  }
  </code></pre>
  
  <p>Now when the directive is called and control comes to <code>ngAfterViewInit</code> it sets the <code>loadingImg</code> gif to the background, and loader shows for milliseconds on the screen. As default value of <code>dynamicUrl</code> is an empty string (so <code>src</code> resolved to ("<a href="http://localhost:3000/" rel="nofollow noreferrer">http://localhost:3000/</a>")) so it also show missing image icon with loader and it gets in the <code>onerror</code> method and sets the <code>errImg</code> as background, so the error image is visible on the screen.</p>
  
  <p>Now the <code>defaultUrl</code> value get it original value populates so actual image is visible.</p>
  
  <p>How can I show solve this, I just want to show only loader image until the actual image get downloaded in the browser.</p>