Html 如何在angular mobile app中显示gif图像

我有一个组件

spinner.component.html

如下：

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

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

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

最后我有一个微调器服务

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

这在桌面浏览器中工作得非常好，但当我在移动浏览器上尝试时，我看不到gif，相反，我得到的是：

但是如果我直接在标记图像中写入

src

属性，如下所示：

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

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

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

---

适用于桌面和移动浏览器。这种行为的原因是什么？

您到底尝试了哪些浏览器和版本（桌面和移动设备）？在桌面Google Chrome（版本68.0.3440.106）中。在移动Google Chrome（版本68.0.3440.91）中，我会尝试更多的桌面浏览器（可能还有更多的移动浏览器），然后再将其诊断为

desktop！=移动版

问题可能是某个特定浏览器的问题。桌面版在IE11、Opera和Firefox中工作，但在移动版中不工作。这很奇怪，但请尝试（删除空格）