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
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):
Khoi Bui |
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.