If not found that image then call default image on error

0
2092
The best way to handle broken image links is the use the onError event for the <img> tag:

<img  class="thumbnail-image" src="assets/images/{{image.ID}}.jpg"
      onerror="this.src='assets/images/default.jpg';"  alt="..." />

Another Solution for achieving good results…

The following approach also works if you want to handle the error in you class:

In your template:

<img [src]='varWithPath' (error) ="onImgError($event)">
In your class:

onImgError(event) { 
    event.target.src = 'assets/path_to_your_placeholder_image.jpg';
}

Best Way I suggest to you all is :- (Angular 2+ or Ionic)

import { Directive, Input } from '@angular/core';

@Directive({
    selector: 'img[src]',
    host: {
        '[src]': 'checkPath(src)',
        '(error)': 'onError()'
    }
})
export class DefaultImage { 
    @Input() src: string;
    public defaultImg: string = '{YOUR_DEFAULT_IMG}';
    public onError() {
        this.src = this.defaultImg;
    }
    public checkPath(src) {
        return src ? src : this.defaultImg;
    }
}

Markup

<img [src]="{DESIRED_IMAGE_SOURCE}" />

LEAVE A REPLY

Please enter your comment!
Please enter your name here