Comment charger une image d'espace réservé lorsque mon image est en cours de chargement depuis le serveur

Question

Je construis une application avec Angular 4/Ionic 3 qui charge les images téléchargées par les utilisateurs à partir d'un serveur. Je suis actuellement en utilisant le code ci-dessous, mais il ne fonctionne pas:

<img src="{{user.image}} || assets/images/profileimage.png" /> 

Je ne sais pas ce que je fais mal. J'ai pensé à ce qu'il montrerait l'image de l'espace réservé jusqu'à ce que l'image principale ait été chargée à partir du serveur. Au lieu de cela, il reste vierge jusqu'à ce que l'image principale se charge. Y a-t-il quelque chose de spécifique à Angular que je devrais utiliser?

Answer 1

isImgLoaded:bool = false; 

<img *ngIf="!isImgLoaded" src="assets/images/profileimage.png" > 
<img [hidden]="!isImgLoaded" [src]="user.image" (load)="isImgLoaded = true" > 

Answer 2

Mieux vaut utiliser ce plugin de chargement paresseux. Il fonctionne génial ..

Installer: npm install ng2-lazyload-image --save

importation charge paresseux app.module.ts: import { LazyLoadImageModule } from 'ng2-lazyload-image';

imports: [ BrowserModule, LazyLoadImageModule ], 

dans ur html remplacer ur balise img avec ceci: <img [defaultImage]="defaultImage" [lazyLoad]="image" [offset]="offset">

dans votre composant créez cette variable:

defaultImage = 'https://www.placecage.com/1000/1000'; 
image = 'https://images.unsplash.com/photo-1443890923422-7819ed4101c0?fm=jpg'; 
offset = 100; 

Pour plus d'informations se réfèrent ce https://www.npmjs.com/package/ng2-lazyload-image

Si vous avez besoin d'aide dans ce laissez-moi savoir ..

Hope this helps ..

Answer 3

Vous devez fournir le chemin relatif comme une chaîne littérale ici.

<img src="{{user.image}} || ./assets/images/profileimage.png" /> 

Ou essayez:

<img [src]="user.image || './assets/images/profileimage.png'" />