Ionic 2 Angular 4中图片加载失败时按类别显示不同占位图

当然可以实现！直接在原生onError属性里写条件判断会有局限性——因为原生JS环境没法轻松访问组件中的item数据。咱们换用Angular的事件绑定方式，就能灵活根据类别切换占位图了，具体做法如下：

1. 修改模板中的图片事件绑定 #

把原生的onError替换成Angular的(error)事件绑定，同时把当前的item和事件对象传递给组件中的处理方法：

<div class="column thumbnail">
  <img class="posterThumbNail" 
       [src]="item.imageUrl" 
       (error)="handleImageError(item, $event)" />
</div>

2. 在组件类中实现条件判断逻辑 #

在你的组件TypeScript代码里，定义handleImageError方法，根据item的类别属性（比如item.category）来设置对应的占位图路径：

// 假设你的item类型有category属性，可根据实际情况调整类型定义
handleImageError(item: { category: string; imageUrl: string }, event: Event): void {
  const imgElement = event.target as HTMLImageElement;
  
  // 根据类别选择对应的占位图
  switch(item.category) {
    case 'movie':
      imgElement.src = './assets/imgs/movie-placeholder.png';
      break;
    case 'tv-show':
      imgElement.src = './assets/imgs/tv-placeholder.png';
      break;
    case 'music':
      imgElement.src = './assets/imgs/music-placeholder.png';
      break;
    // 默认占位图
    default:
      imgElement.src = './assets/imgs/placeholder.png';
  }
}

注意事项 #

• 确保item.category的取值和你定义的case匹配，比如如果你的类别是数字或者其他类型，记得调整判断逻辑。
• 确认占位图的文件路径正确，避免出现占位图也加载失败的情况。
• 如果你不想直接修改img元素的src，也可以选择修改item.imageUrl的值（但要注意如果item是循环列表中的对象，可能会影响其他地方的显示，按需选择即可）。

内容的提问来源于stack exchange，提问作者Joseph