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}" />