This library was creating to abstract the LQIP – Low Quality Image Placeholders technique used by Medium and Instagram to Angular apps. The code was implemented inspired by this awesome codepen made by @JMPerez.
And we used RandomUser API to make our tests in development environment.
First, we load the image with low quality and it is really fast. So, the user who have a slow internet can see a preview of what is coming. Then, we load the same image, but, with a high quality.
It is a short explanation of how this technique works, if you want to know more, just visit the links above!
To install this library, run:
$ npm install @pluritech/ng-image-preview --saveimport { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
// Import the library
import { NgImagePreviewModule } from '@pluritech/ng-image-preview';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
// Specify the library as an import
NgImagePreviewModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }Once the library is imported, you can use image-preview component in your Angular application:
<div *ngFor="let picture of pictures">
<image-preview
[lowImage]="picture.thumbnail"
[hqImage]="picture.large"
paddingBottom="95%"
fallbackSrc="./assets/no-image-box.png"
filterLowImage="blur(10px)">
</image-preview>
</div>| Parameter | Description |
|---|---|
| lowImage | low image url |
| hqImage | high quality image url |
| paddingBottom | a padding-bottom value, to prevent the reflow, default is 66.6% |
| fallbackSrc | a path to fallback image the will replace the hqImage if occur an error on load |
| bgPlaceholder | a background-color value to fill the placeholder 'container' |
| filterLowImage | a filter value to image small like 'blur(10px)'. Default is 'blur(20px)' |
| alt | a value 'alt' to both, low image and high image |
| title | a value 'title' to both, low image and high image |
- Manage images in cache
Feel free to make your pull request.
- 1.1.1 - Now you can use the operator Elvis to load data async, without the needed of use the *ngIf
- Lucas Corrẽa: https://github.com/lucascco
- Luis Moreno: https://github.com/luishmcmoreno
- Mateus Durâes: https://github.com/mateusduraes