访问 ng-image-slider 中图像 `<img>` 的属性有哪些方法（特别是 `onerror` 如果找不到 img src 则显示默认 src）

Question

我正在使用

<ng-image-slider>

内部角度组件来显示滑动图像。如果图像源不可用，那么我希望滑块显示默认图像（考虑到默认图像肯定存在）。怎么办？

我已经看到为了处理此类问题，我们使用

onerror

事件作为

<img> 

标签。所以这将是 Angular 中的

(error)

事件处理程序，但是我该如何对 ng-image-slider 内的图像执行此操作？

这是

<ng-image-slider>

的插件： [1]：https://github.com/sanjayV/ng-image-slider

Answer 1

如果不存在图像，您必须创建一个额外的函数来执行默认图像集。

images = [];

ngOnInit() {
    this.setDefaultImageIfNotPresent();
}

setDefaultImageIfNotPresent() {
    if (this.imageObject?.length) {
        this.images = this.imageObject.map((item: any) => {
        item.image = item.image || 'https://placehold.co/600x400';
        item.thumbImage = item.thumbImage || 'https://placehold.co/600x400';
        return item;
    });
    }
}

Stackblitz 演示