Как показать изображение в формате gif в мобильном приложении

Question

У меня есть компонент spinner.component.html, как это:

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

И контроллер spinner.component.ts вот так:

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

И, наконец, у меня есть спиннер 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;
        }
      });
  }
}

В моем app.component.html я заявляю мой счетчик:

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

Это прекрасно работает в настольных браузерах, но когда я пробую его в мобильном браузере, я не вижу gif, вместо этого я получаю следующее:

Но если я напишу атрибут src непосредственно в изображение тега, как это:

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

работает как в настольных, так и в мобильных браузерах. В чем причина такого поведения?