@iresa/ngx-imagely NPM

NGX-IMAGELY

Image utilities for modern Angular app

An image rendering directive for Angular 2+ app. Demo: https://iresa-org.github.io/ngx-imagely

Features

✅ Image Lazy Loading
✅ Remind developers of missing alt tag
✅ Retry & Fallback images

Installation

From your project folder, run ng add @iresa/ngx-imagely

This command will import NgxImagelyModule.forRoot() into your AppModule:

import { NgxImagelyModule } from '@iresa/ngx-imagely';
 
@NgModule({
  ...
  imports: [
    ...
    
    // NgxImagelyModule
    NgxImagelyModule.forRoot(), 
    ...
  ],
  ...
})
export class AppModule {}

Or register NgxImagelyModule to a feature module with following code:

import { NgxImagelyModule } from '@iresa/ngx-imagely';
 
@NgModule({
  ...
  imports: [
    ...
    
    // NgxImagelyModule
    NgxImagelyModule, 
    ...
  ],
  ...
})
export class FeatureModule {}

Usage

Loading Type

<!-- Lazy Loading -->
<img
  src="https://material.angular.io/assets/img/examples/shiba2.jpg"
  alt="Photo of a Shiba Inu"
  height="280"
  width="350"
/>

<!-- Eager Loading -->
<img
  src="https://material.angular.io/assets/img/examples/shiba2.jpg"
  alt="Photo of a Shiba Inu"
  height="280"
  width="350"
  loadingType="eager"
/>

Retries and Fallback image

<img
  src="https://noimage.com" 
  alt="Url not found. Use default" 
  height="350" 
  width="350"
  default="https://www.amulyamica.com/files/noimage.jpg"
  retryCount="3"
/>

You can also provide these configurations at root level

import { NgxImagelyModule } from '@iresa/ngx-imagely';
 
@NgModule({
  ...
  imports: [
    ...
    
    // NgxImagelyModule
    NgxImagelyModule.forRoot({
      default: 'https://www.amulyamica.com/files/noimage.jpg',
      loadingType: 'eager'
    }), 
    ...
  ],
  ...
})
export class AppModule {}

Properties

Property	Type	Descriptions	Default
default	Input	URL of a fallback image when failure occurs
loadingType	Input	Loading type for target images. Values: 'lazy' \| 'eager'.	'lazy'
retryCount	Input	Count of how many times a failed image should get retried.	0