Ionic 2 Angular 4 中出现错误条件的回退图像

Question

我有一个包含图像源的标签。如果图像失败，我还写了一个错误案例。下面是我的代码

<div class="column thumbnail"><img class="posterThumbNail" [src]="item.imageUrl" onError="this.src='./assets/imgs/placeholder.png';" /></div>

我能否在此 onError 中设置条件，以便根据缩略图类别显示与该类别相关的不同占位符图像。期待类似的东西，

<div class="column thumbnail"><img class="posterThumbNail" [src]="item.imageUrl" onError="errorPlaceHolder" /></div>

<ng-template #errorPlaceHolder>
 <div [ngSwitch]="item.category">
    <template [ngSwitchCase]="foo">
        <div>./assets/imgs/placeholderFoo.png</div>
    </template>
    <template [ngSwitchCase]="bar">
        <div>./assets/imgs/placeholderBar.png</div>
    </template>
    <template [ngSwitchCase]="cat">
        <div>./assets/imgs/placeholderCat.png</div>
    </template>¯
    <template [ngSwitchCase]="dog">
        <div>./assets/imgs/placeholderDog.png</div>
    </template>
</div>
</ng-template>

我知道上面的代码在语法上是不正确的。我正在寻找与我上面的代码片段相匹配的解决方案。谢谢

Answer 1

你可以有一个 ts 端变量来设置 errorPath。

errorPaths:string[]=[];

//set the path wherever you receive item
switch(item.category){
  //set the path for each case in loop

}

在您的 html 文件中，

 <div ngFor="let item of items;let i=index">
    <div class="column thumbnail"><img class="posterThumbNail" [src]="item.imageUrl" [onError]="errorPaths[i]" /></div>
</div>

Answer 2

您应该使用 (error) 事件来处理错误，根据您可以使用对象来显示后备图像

HTML:

  <div *ngFor="let item of items">
  ...

  <img *ngIf="!item.fallbackUrl" class="posterThumbNail" [data]="item.imageUrl" (error)="handleError(item)" />

  <img *ngIf="item.fallbackUrl" class="posterThumbNail" [src]="item.placeHolder" />

  ...

  </div>

控制器：

handleError(item: any) {
  switch (item.category) {
    case "foo":
      item.fallbackUrl = './assets/imgs/placeholderFoo.png';
      break;
    case "bar":
      item.fallbackUrl = './assets/imgs/placeholderBar.png';
      break;
    default:
  }

}

Answer 3

您也可以反转逻辑，仅在加载主图像时才替换占位符。这可以通过 ngif 和 (load) 来完成。另外，如何将逻辑放在 class 而不是模板中？更容易调试？它可以在附加阵列的帮助下完成，以跟踪加载的图像。该数组可以与原始数组合并，具体取决于您如何获取它以及如何管理它。

Class:

loaded = [false, false, false]; // should have items length
...
getReplacementImage(category) {
switch (category) {
  case "dog":
    return "dogImage";
  case "cat":
    return "catImage"
  default:
    return "placeholderImage"
}

Html:

<... *ngFor="let item of items; let i = index">

    <img [class.image-error]="!loaded[i]" ... [src]="item.image" (load)='loaded[i]=true'>

    <img *ngIf="!loaded[i]" ... [src]="getReplacementImage(item.category)">

</...>

CSS:

.image-error {
  display:none; // to hide the placeholder image
}

DEMO

Ionic 2 Angular 4 中出现错误条件的回退图像

Fallback image with condition on error in Ionic 2 Angular 4

image

src

ionic2

ng-template

angular