angular4 dynamic image src issue

Question

I have an img tag is which src populated dynamically.

<img [src]="dynamicUrl" loader >

dynamicUrl is a variable that is populated with an ajax call's result.

dynamicUrl:string ="";

loader is a directive in which I have done

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

Now when the directive is called and control comes to ngAfterViewInit it sets the loadingImg gif to the background, and loader shows for milliseconds on the screen. As default value of dynamicUrl is an empty string (so src resolved to ("http://localhost:3000/")) so it also show missing image icon with loader and it gets in the onerror method and sets the errImg as background, so the error image is visible on the screen.

Now the defaultUrl value get it original value populates so actual image is visible.

How can I show solve this, I just want to show only loader image until the actual image get downloaded in the browser.

Trusha · Accepted Answer · 2018-04-24 08:07:41Z

2

You can put loader directive within div element;

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

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

answered Apr 24, 2018 at 8:07

Trusha

6115 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

angular4 dynamic image src issue

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related