如果文件存在于 assets 文件夹中，我们如何在 img 元素中设置 url

Question

assets 文件夹由许多图像组成，这些图像将根据列表元素打印在视图中。 例如： 为了从图像文件夹中检索图像，可以填写什么问号。 我的代码：

<ion-content padding>
  <ion-list>
    <ion-item *ngFor="let data of datas | async" class="pqr">
      <ion-thumbnail item-left>
        <img src= {{"../assets/image/" + data.imageName}}>
      </ion-thumbnail>
      {{data.Comp}}<br> 
      {{data.Demand}}<br>
      <p> {{data.Desig}}<br></p>
        {{data.Place}}<br>
        {{data.when}}<br>
    </ion-item>
  </ion-list>

</ion-content>

Answer 1

更新：

请尝试如下所示。.ts 文件中的subscribe 并删除async 管道。另外，将*ngFor 放在<ion-list> 元素上。试试这个，看看它是否有任何不同的结果。

.ts

datas: FirebaseListObservable<any[]>; 

constructor(public navCtrl: NavController,public authData:AuthData,public af:AngularFire){ 
   af.database.list('/datas').subscribe(
      result => {
        this.datas = result;
      },
}

.html

<ion-content padding>
  <ion-list *ngFor="let data of datas">
    <ion-item  class="pqr">
      <ion-thumbnail item-left>
        <img src= <img src= "../assets/image/{{data.imageName}}">
      </ion-thumbnail>
      {{data.Comp}}<br> 
      {{data.Demand}}<br>
      <p> {{data.Desig}}<br></p>
        {{data.Place}}<br>
        {{data.when}}<br>
    </ion-item>
  </ion-list>

</ion-content>

旧

你必须按如下所示进行。

<ion-thumbnail item-left>
        <img src= "../assets/image/{{data.imageName}}">
</ion-thumbnail>