如何在角度移动应用程序中显示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"/>

可在桌面和移动浏览器中使用。这种行为的原因是什么？