Goal: Load an image with a dynamic source. If no image is found, then load a placeholder image instead.
This should demonstrate what I'm trying to do, but I don't know how to conditionally set validImage based on whether the first img src is valid.
<img *ngif="validImage" class="thumbnail-image" src="./app/assets/images/{{image.ID}}.jpg" alt="...">
<img *ngif="!validImage" class="thumbnail-image" src="./app/assets/images/placeholder.jpg" alt="...">
validImage should be true if src="./app/assets/images/{{image.ID}}.jpg" returns an image. Otherwise it would return false and only the second img tag should show.
There are obvious work arounds like storing a list of all valid image sources, but I'm thinking there is a better way to accomplish this.
Any suggestions on the best way to implement this in Angular2 would be greatly appreciated.
The best way to handle broken image links is the use the onError event for the <img> tag:
<img class="thumbnail-image" src="./app/assets/images/{{image.ID}}.jpg"
onerror="this.src='./app/assets/images/placeholder.jpg';" alt="..." />
<img [src]="pic" (error)="setDefaultPic()">
And somewhere in your component class:
setDefaultPic() {
this.pic = "assets/images/my-image.png";
}
I ran into a similar need. I wanted to default to a 1X1 transparent pixel if an img url was null or returned an error (404 etc).
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}" />