ngx-default-image

Angular library which provides a way prevend image rendering when the image loading failed with custom replacement image.
Get extracted meta info from the image.

| Import

Import the module on your app.module.ts file as follow.

import { NgxDefaultImageModule} from "ngx-default-image";

| Add to imports

imports: [
  ...
  NgxDefaultImageModule
  ...
],

| Using META interface

import { META } from "./ngx-default-image.directive";

| Core function

<img src="'https://dummyimage.com/600x400/fff/000'" [imageURL]="imageURL" NgxDefaultImage />

imageURL : Replacement image URL (Usually from asset folder in any dimension).

Using service

Emit the function in order to get meta info as follows.

<img src="'https://dummyimage.com/600x400/fff/000'" [imageURL]="imageURL" (imageMetaInfo)="imageMetaInfo($event)" NgxDefaultImage />

public imageMetaInfo(event: META) {
  this.imageMeta = event;
}

For series of image under loop

<div *ngFor="let img of images:let index = index;">
  <img src="'https://dummyimage.com/600x400/fff/000'" [imageURL]="imageURL" 
  (imageMetaInfo)="imageMetaInfo($event, index)" NgxDefaultImage />
</div>

public imageMetaInfo(event: META, index: number) {
  this.imageMeta = event;
}

Ability

The image will return the meta info as follows:

public imageMetaInfo(event: META) {
  this.imageMeta = event;
}

Meta properties

Properties	Data Type
isValidImage	Boolean
aspectRatio	string
x	number
y	number
rwidth	number
rheight	number
renderTime	string
top	number
right	number
bottom	number
left	number
datedOn	any
width	number
height	number
src	string
esrc	string
alt	string
crossorigin	string

Code integration

To use this package as a service npm i ngx-default-image install this on the root angular project .

Note: Don't forget to run this commend npm i ngx-default-image on root folder or else it will throw error.

Then import the module as follow on imports array

NgxDeviceInfoModule

Author

Thanks in advance

Manojkumar Muthukumar

Coimbatore