CODEWITHSUNDEEP
javascripthtmlangularionic3
Darrell
Darrell

Reputation: 97

How do I get a placeholder image to load when my image is still loading from server

I am building an application with Angular 4/ Ionic 3 that loads images that users upload from a server. I am currently using the code below but it is not working:

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

I am not sure what I am doing wrong. I thought what it would show the placeholder image until the main image had loaded from the server. Instead it is still just blank until the main image loads. Is there something specific to Angular that I should be using?

Upvotes: 5

Views: 7731

Answers (5)

Alexander Borisov
Alexander Borisov

Reputation: 1199

I found this YouTube video very helpful. Here is the detailed documentation for the Angular module which is used in the video.

Install LazyLoadImageModule

npm i ng-lazyload-image

Module file

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { LazyLoadImageModule } from 'ng-lazyload-image'; // <-- import it
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, LazyLoadImageModule], // <-- and include it
  bootstrap: [AppComponent],
})
export class MyAppModule {}

Component file

import { Component } from '@angular/core';

@Component({
  selector: 'image',
  template: ` <img [defaultImage]="defaultImage" [lazyLoad]="image" /> `,
})
class ImageComponent {
  defaultImage = 'https://www.placecage.com/1000/1000';
  image = 'https://images.unsplash.com/photo-1443890923422-7819ed4101c0?fm=jpg';
}

Where [defaultImage] is a placeholder and [lazyLoad] is the actual image.

Upvotes: 1

Coderer
Coderer

Reputation: 27284

As far as I can tell, all modern browsers should support HTMLImageElement.complete, so you can just use

<img #userImage [src]="{{user.image}}">
<img *ngIf="!userImage.complete" src="assets/images/profileimage.png">

Upvotes: 5

Irfan Pathan
Irfan Pathan

Reputation: 325

Better to use this lazy load plugin. It works awesome..

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

Import lazy load in app.module.ts: import { LazyLoadImageModule } from 'ng2-lazyload-image';

 imports: [ BrowserModule, LazyLoadImageModule ],

in ur html replace ur img tag with this: <img [defaultImage]="defaultImage" [lazyLoad]="image" [offset]="offset">

in ur component create this vaiables : 

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

For more info refer this https://www.npmjs.com/package/ng2-lazyload-image

If you need any help in this let me know..

Hope this helps..

Upvotes: -1

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 657446

isImgLoaded:bool = false;

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

Upvotes: 8

Suraj Rao
Suraj Rao

Reputation: 29625

You need to provide the relative path as a string literal here .

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

Or Try:

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

Upvotes: 1

Related Questions