Angular 4 null call when loading image

Question

In my angular 4 application I have to load a thumbnail, So I have img [src] tag. To append the authorization token at the request to load this image I use a custom image pipe and an async pipe. It works good but if I see in the network tab I can see a strange call to null and I think is the async pipe:

Request URL:http://localhost:4200/null

image.pipe

@Pipe({name: 'image'})
 export class ImagePipe implements PipeTransform {
  constructor(private http: Http) {}

  transform(url: string, selfLink?: any, width?: any) {
    /* tell that XHR is going to receive an image as response, so it can be then converted to blob,
      * and also provide your token in a way that your server expects */

    if (selfLink) {
      url = selfLink + url + width;
    }


    const headers = new Headers({'Authorization': 'Bearer ' + localStorage.getItem('token'), 'Content-Type': 'image/jpeg'});
    // specify that response should be treated as blob data
    return this.http.get(url, new RequestOptions({headers: headers, responseType: ResponseContentType.Blob}))
      .map(response => response.blob()) // take the blob
      .switchMap(blob => {
        // return new observable which emits a base64 string when blob is converted to base64
        return Observable.create(observer => {
          const reader = new FileReader();
          reader.readAsDataURL(blob); // convert blob to base64
          reader.onloadend = function() {
            observer.next(reader.result); // emit the base64 string result
          }
        });
      });
  }
}

And this is the component.html

<div class="card-avatar" (click)="openFilePicker()">
  <img class="img pointer" [ngStyle]="{'width.px': 130,'height.px': 130}" *ngIf="links.avatar && imageLink" [src]="(imageLink | image) | async" />
  <img src="../../assets/img/default-avatar.png" class="img pointer" *ngIf="links.avatar === undefined">
</div>

It seems that the async pipe make the call 2 times, 1 is corect and 1 is with error, I don't know why, my image link is never null or undefined because if I print the url in the image pipe I see always the correct link.

this is the call:

Also if I write directly a link into the pipe without any call I still have a null <img [src]="('http://.....:8080/api/v1/medias/1/download' | image) | async" />

How can I solve this null call?

Answer 1

Try using [attr.src]=(imageLink | image) | async" instead.

With the attr.<whatever> syntax, nulls prevent the attribute from being added in the first place.

Example: https://stackblitz.com/edit/angular-gitter-btxhuh?file=app%2Fapp.component.html

Answer 2

The problem is that src attribute is trying to execute a GET request before the async pipe resolved some value.

It can be solved by using *ngIf and checking if the value you wish to use in src has resolved.

Same with iFrames.