html - Cum să afișezi o imagine gif într-o aplicație mobilă Angular

Am un component spinner.component.html astfel:

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

Și un controler spinner.component.ts ca acesta:

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

Și în final am un serviciu de spinner 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;
        }
      });
  }
}

În app.component.html îmi declar spinner-ul:

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

Acesta funcționează perfect în browserele de pe desktop, dar când încerc pe browserul de pe mobil nu pot vedea gif-ul, în schimb asta este ceea ce obțin:

Dar dacă scriu atributul src direct în tag-ul imaginii astfel:

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

funcționează atât în browserele de desktop, cât și în cele mobile. Care este motivul acestui comportament?