Ionic - 4 图像显示失败答案

【问题标题】：Ionic - 4 Image display failedIonic - 4 图像显示失败
【发布时间】：2020-03-29 23:25:15
【问题描述】：

图像在第一次编译时没有加载，但在第二次编译时完美加载这是我的代码

.html

 <div class="home_main_stack_menu" *ngFor="let service of mainServicesList; let i = index ">
        <ion-row  >
              <ion-col class="textCenter"  >
                <img [src] ="getImage(service.image)">
                <p>{{service.service_name}}</p>
              </ion-col>
          </ion-row>
      </div>

.ts

getImage(imageurl) {
  return 'https://techlabz.in/allorepair' + imageurl;
}

【问题讨论】：

标签： angular ionic-framework ionic4

【解决方案1】：

<div class="home_main_stack_menu" *ngFor="let service of mainServicesList; let i =index ">
    <ion-row  >
         <ion-col class="textCenter"  *ngIf="service.image">
           <img [src] ="getImage(service.image)">
           <p>{{service.service_name}}</p>
         </ion-col>
     </ion-row>
 </div>

只添加这段代码 *ngIf="service.image" 直到 service.image 加载然后显示您的图片。

【讨论】：

【解决方案2】：

<div class="home_main_stack_menu" *ngFor="let service of mainServicesList; let i = index ">
    <ion-row>
        <ion-col class="textCenter">
        <img [src]="’https://techlabz.in/allorepair’+service.image">
        <p>{{service.service_name}}</p>
        </ion-col>
    </ion-row>
</div>

尝试对 src 属性进行更简单的绑定？最好不要使用函数，特别是对于 *ngFor 复制模板。理想情况下，由于您的图像源 URL ('https://techlabz.in/allorepair') 是恒定的 - 您可以在 mainServicesList 数组上运行 .map 方法并确保每个项目（服务）的图像属性（service.image）已经具有模板的完整 URL使用。

还可以查看是否需要使用 Angular’s sanitizer. 清理图片 URL

【讨论】：