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

Table of Contents

• Installation
• Usage
• Properties
• Contributors

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

Contributors ✨

Thanks goes to these wonderful people (emoji key):

This project follows the all-contributors specification. Contributions of any kind welcome!

This project uses schematics from @ngneat/lib to generate boilerplate used for open source library.