typescript - 离子：从本地 json 读取的数据在实验室中有效，但在我的手机上无效

Question

我正在编写应用程序，该应用程序应该从本地 json 文件中读取 50 多条记录，并向用户显示div由ngIf.

为了实现它，我正在使用data-pull service：

import { Fish, Fishes } from './../models/fish';
import { HttpOptions } from './../../node_modules/@capacitor-community/http/dist/esm/definitions.d';
import { Injectable } from '@angular/core';
import { Http } from '@capacitor-community/http';
import { from, Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class DataPullService {

  private fishes: Fishes;
  constructor() { }

  pullFishes() {
    const options: HttpOptions = {
      url: '/assets/data/ryby.json'
    };
    return Http.request(options).then((res) => {
      this.fishes = res.data;
    });
  }
  getFishes() {
    return this.fishes;
  }
}

该服务用于我的search page：

import { DataPullService } from './../../data-pull.service';
import { Fish, Fishes } from './../../../models/fish';
import { Component, OnInit } from '@angular/core';
import { IonInfiniteScroll } from '@ionic/angular';

@Component({
  selector: 'app-search',
  templateUrl: './search.page.html',
  styleUrls: ['./search.page.scss'],
})
export class SearchPage implements OnInit {
  fishes: Fishes;
  searchTerm: string;
  fishesLoaded = false;
  constructor(private dataPullService: DataPullService) { }

  ngOnInit() {
    this.dataPullService.pullFishes();
    this.fishes = this.dataPullService.getFishes();
    this.fishesLoaded = true;
    console.log(this.fishes);
  }

}

这是html此页面：

<ion-content>
  <app-topbar></app-topbar>
  <div id="panel">
    <ion-searchbar [(ngModel)]="searchTerm" id="search" animated placeholder="Karp"></ion-searchbar>
    <div *ngIf="fishesLoaded"  id="fishlist">

      <div *ngFor="let fish of fishes?.fish | searchName:searchTerm"  style="margin-top: 1em;">
        <div class="fishItem">
          <div class="img" style="background-image: url({{fish?.photoPath}});"></div>
          <div class="fishData">
            <div class="tekst">
              <h3>{{fish?.name}}</h3>
              <h6>{{fish?.latinName}}</h6>
            </div>
          </div>
        </div>
      </div>

      <ion-infinite-scroll threshold="100px">
      </ion-infinite-scroll>
    </div>
  </div>
</ion-content>

这是此页面在我的浏览器中的外观：

还有我的手机屏幕：

还有我得到的所有输出DevTools：

{message: 'MalformedURLException'}

Error: Uncaught (in promise): Error: MalformedURLException
Error: MalformedURLException
    at Object.cap.fromNative (VM3:414)
    at <anonymous>:1:18
...

Any ideas how to make it work in my phone as well?