ngx-blurred-image

Installation

Install the npm package.

npm i ngx-blurred-image

Import module:

import { BlurredImageComponent } from 'ngx-blurred-image/components';
 
@NgModule({
    declarations: [ BlurredImageComponent ]
})

Usage

<div blurred-image
    [small]="base64"
    preview="/assets/img/annie-spratt-419262-preview.jpg"
    [size]="{width: 880, height: 587}"
></div>

Properties

name	type	description
small	string	Thumbnail image in base64 format.
preview	string	Path to full-size image.
size	object	Width and height of the container with the image.
delay	number	The delay in ms before showing the image.

Demo

http://crystalui.org/components/blurred-image/example