我们如何设置 img 元素的 url 以打印带有图像的视图.下面是我的代码

Question

资产文件夹由许多图像组成，这些图像将根据列表元素打印在视图中。我的代码：

<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

您需要使用DomSanitizer 。

// Angular
import { Component } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';
...
@Component({...})
export class YourPage {
    constructor(private domSanitizer: DomSanitizer, ...) { 
        //...
    }
    public getImageUrl(data: any): any {
        let url = `../assets/image/${data.imageName}`;
        return this.domSanitizer.bypassSecurityTrustResourceUrl(url); 
    }
}

然后在您看来：

<!-- ... -->
<ion-item *ngFor="let data of datas | async" class="pqr">
    <ion-thumbnail item-left>
        <img *ngIf="data && data.imageName" [src]="getImageUrl(data)">
    </ion-thumbnail>
<!-- ... -->