Angular2: Afficher l'image d'espace réservé si img src n'est pas valide

Je suis tombé sur un besoin similaire. Je voulais par défaut à une 1X1 pixel transparent si une img url a la valeur null ou n'a pas retourné un message d'erreur (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;
    }
}

Balisage

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

J'ai créé un composant personnalisé qui utilise un espace réservé d'image si l'image n'est toujours pas chargé ou si une erreur se produit lors du chargement d'elle:

img.composante.ts:

import { Component, Input, OnChanges } from '@angular/core';
@Component({
selector: 'my-img',
templateUrl: 'img.component.html',
})
export class ImgComponent implements OnChanges {
@Input() 
public src: string;
@Input() 
public default: string;
@Input() 
public alt: string;
public cached = false;
public loaded = false;
public error = false;
private lastSrc: string;
constructor() { }
public ngOnChanges() {
if (this.src !== this.lastSrc) {
this.lastSrc = this.src;
this.loaded = false;
this.error = false;
this.cached = this.isCached(this.src);
}
if (!this.src) {
this.error = true;
}
}
public onLoad() {
this.loaded = true;
}
public onError() {
this.error = true;
}
private isCached(url: string): boolean {
if (!url) {
return false;
}
let image = new Image();
image.src = url;
let complete = image.complete;
//console.log('isCached', complete, url);
return complete;
}
}

img.component.html:

<ng-container *ngIf="!cached">
<img 
*ngIf="!error" 
[hidden]="!loaded"
[src]="src" 
[alt]="alt" 
(load)="onLoad()" 
(error)="onError()"
>
<img 
*ngIf="default && (error || !loaded)" 
[src]="default" 
[alt]="alt"
>
</ng-container>
<ng-container *ngIf="cached">
<img 
*ngIf="!error" 
[src]="src" 
[alt]="alt" 
(error)="onError()"
>
<img 
*ngIf="default && error" 
[src]="default" 
[alt]="alt"
>
</ng-container>

Alors vous pouvez l'utiliser comme:

<my-img [src]="src" [alt]="alt" [default]="DEFAULT_IMAGE"></my-img>

PS: j'ai vérifier au préalable si l'image est mise en cache pour éviter l'image de clignotant (normalement, quand un composant qui possède l'image à l'intérieur est re-rendus) entre l'espace réservé et de l'image (si elle est mise en cache, je montre l'image avant même le chargement du pavillon être défini à true). Vous pouvez décommenter le journal dans la isCached fonction pour voir si vos images sont mises en cache ou non.

src="validImage ? validImageUrl : placeHolderImgUrl"

J'ai Juste fait :

Dans mon FICHIER HTML a écrit ce

<div 
(click)="getInfo(results[movie].id)"
*ngFor="let movie of (results | key:'10')" 
class="card" style="margin-top:7%;">
<img [src]="getImage(results[movie])" alt="" class="card-img-top pointer"></div>

J'ai appelé une fonction qui est dans mon composant.ts et de passer de l'objet wheres mon url en paramètre

getImage(result){
if(result.poster_path){
return this.imageURL+(result.poster_path);
}else return "./assets/noFound.jpg"

Heres ma fonction , j'ai d'abord vérifier si l'objet url de l'image est différente de null si c'est vrai alors je retourne l'url de l'image d'autre-je retourner mon défaut "noFound" de l'image qui est dans mon appli actifs.

Espère que cela aide!