[src] attribute the first time it calls to an undefined endpoint

GET http://localhost:8080/undefined 404 (Not Found)

<img [src]="data.avatar_url" width="100" height="100"/>

this.data = {};
http.get('https://api.github.com/users/danicomas').toRx().map(res => res.json()).subscribe(response => this.data = response);

[maziarrezaei]

The solutions above did not work for me for this situation:

[src]='getImageUrl() | async'

before the promise is resolved, I have a momentarily null value that causes the request to be triggered anyway. The solution that worked for me and can easily cover the above scenarios too is:

[attr.src]='getImageUrl() | async'

[PatrickJS]

I mentioned this subtlety in this issue https://github.com/angular/angular/issues/3007 (for me it was making /null requests) the current workaround is || '' so

<img [src]="data.avatar_url || '' " width="100" height="100">

or default the initial avatar_url value to empty string (probably a good idea anyways).

I would say if interpolation gets to have a default case of empty string then [src] should as well. Here’s my code

<div>
  <img [src]="(model?.getValue('boxshot') | async) || '' ">
</div>