时间戳

首页 > 解决方案 > 角度图像404后备

angular - 角度图像404后备

问题描述

我为图像编写了一个指令，以显示可能不存在的图像的占位符，它工作正常。当找不到图像文件时，会显示占位符，但有此登录控制台表示找不到图像。我想阻止它。

但我无法在控制台中抑制GET 404 (Not Found)错误。有什么办法吗？

我的指令：

@Directive({
    selector: 'img[imgFallback]'
})

export class ImageFallbackDirective implements OnDestroy {
    private _isApplied = false;
    private ERROR_EVENT_TYPE = 'error';
    private LOAD_EVENT_TYPE = 'load';
    private _targetImageElement: HTMLImageElement;
    private cancelOnError: () => void;
    private cancelOnLoad: () => void;
    
    srcFallback: string = "https://via.placeholder.com/120";
    @Output() wasLoaded = new EventEmitter<boolean>();

    constructor(private el: ElementRef, private renderer: Renderer2) {
        this._targetImageElement = el.nativeElement;

        this.onError = this.onError.bind(this);
        this.onLoad = this.onLoad.bind(this);

        this.addListeners();
    }

    ngOnDestroy() {
        this.removeErrorEvent();
        this.removeOnLoadEvent();
    }

    private onError() {
        this.srcIsFallback()
            ? this.setSrcToFallback()
            : this.removeOnLoadEvent();
    }

    private setSrcToFallback() {
        this._isApplied = true;

        this.setFallbackSrc();
    }

    private setFallbackSrc(isCustom?: boolean) {
        this.renderer.setAttribute(
            this._targetImageElement,
            'src',
            this.srcFallback
        );
    }

    private srcIsFallback() {
        return this._targetImageElement.getAttribute('src') !== this.srcFallback;
    }

    private onLoad() {
        this.wasLoaded.emit(this._isApplied);
    }

    private removeErrorEvent() {
        if (this.cancelOnError) {
            this.cancelOnError();
        }
    }

    private removeOnLoadEvent() {
        if (this.cancelOnLoad) {
            this.cancelOnLoad();
        }
    }

    private addListeners() {
        this.cancelOnError = this.renderer.listen(
            this._targetImageElement,
            this.ERROR_EVENT_TYPE,
            this.onError
        );

        this.cancelOnLoad = this.renderer.listen(
            this._targetImageElement,
            this.LOAD_EVENT_TYPE,
            this.onLoad
        );
    }
}

标签： angular

解决方案

抱歉，但没有办法防止这些错误泄漏到控制台。

我建议您使用@HostListener不要手动附加事件侦听器。

@HostListener('error', ['$event.target'])
onError(imgElement) {
  // your logic
}

推荐阅读