How to show a gif image in angular mobile app

I have a component spinner.component.html like this:

<div *ngIf="show">
    <img [src]="loadingImage" *ngIf="loadingImage" width="120px" height="120px"/>
</div>

And a controller spinner.component.ts like this:

export class SpinnerComponent implements OnInit, OnDestroy {

  @Input() loadingImage: string;
  @Input() show: boolean = false;
  @Input() name: string;

  constructor(
    private spinnerService: SpinnerService
  ) { }

  ngOnInit() {
    if (!this.name) 
      throw new Error("Spinner must have a 'name' attribute.");

    this.spinnerService.register(this);
  }

  ngOnDestroy() {
    this.spinnerService.unregister(this);
  }
}

And finally I have a spinner service spinner.service.ts:

export class SpinnerService {

  private spinnerCache = new Set<SpinnerComponent>();

  constructor() { }

  register(spinner: SpinnerComponent) {
    this.spinnerCache.add(spinner);
  }

  unregister(spinnerToRemove: SpinnerComponent) {
    this.spinnerCache.forEach(spinner => {
      if (spinner === spinnerToRemove) {
        this.spinnerCache.delete(spinner);
      }
    });
  }

  show(spinnerName: string) {
    this.spinnerCache.forEach(spinner => {
      if (spinner.name === spinnerName) {
        spinner.show = true;
      }
    });
  }

  hide(spinnerName: string) {
    this.spinnerCache.forEach(spinner => {
      if (spinner.name === spinnerName) {
          spinner.show = false;
        }
      });
  }
}

In my app.component.html I declare my spinner:

<spinner name="mSpinner" loadingImage="assets/spinner.gif"></spinner>

This is working perfectly fine in desktop browsers but when I try it on mobile browser I cant see the gif, instead this is what I get:

But if I write the src attribute directly in the tag image like this:

<img src="assets/spinner.gif" *ngIf="loadingImage" width="120px" height="120px"/>

works in both desktop and mobile browsers. What is the reason for this behaviour?