NGX Image

Library that loads the image progressively in any format in the Angular.

Description

This library offers an easy way to treat images and deliver excellent performance with multiple image formats in browser context with no error if you are using Server Side Rendering.

Installation

Use the node package manager to install

1npm i ngx-image

or

1yarn add ngx-image

Usage

First import the Image Module to the module in your project that you will use ngx-image.

1import { BrowserModule } from '@angular/platform-browser';
2import { NgModule } from '@angular/core';
3
4import { ImageModule } from 'ngx-image';
5
6import { AppComponent } from './app.component';
7
8@NgModule({
9  declarations: [
10    AppComponent
11  ],
12  imports: [
13    BrowserModule,
14    ImageModule
15  ],
16  providers: [],
17  bootstrap: [AppComponent]
18})
19export class AppModule { }

Then, declare a variable that values ​​the image - placeholder and url - and places the value of each image url.:

1import { Component } from '@angular/core';
2
3import { Image } from 'ngx-image';
4
5import { environment } from 'src/environments/environment';
6
7@Component({
8  selector: 'plop-root',
9  templateUrl: './app.component.html',
10  styleUrls: ['./app.component.scss']
11})
12export class AppComponent {
13
14  private readonly assets: string;
15
16  images: Image[];
17  webpExample: { regular: Image, webp: Image };
18  shapeExample: Image;
19
20  constructor() {
21    this.assets = `${environment.application.protocol}://${environment.application.host}/${environment.application.assets}`;
22    this.images = [
23      {
24        placeholder: `${this.assets}/images/ironman_1by1_placeholder.jpg`,
25        url: `${this.assets}/images/ironman_1by1_url.jpg`
26      },
27      {
28        placeholder: `${this.assets}/images/hulkbuster_1by1_placeholder.jpg`,
29        url: `${this.assets}/images/hulkbuster_1by1_url.jpg`
30      }
31    ];
32
33    this.webpExample = {
34      regular: {
35        placeholder: `${this.assets}/images/captainamerica_1by1_placeholder.jpg`,
36        url: `${this.assets}/images/captainamerica_1by1_url.jpg`
37      },
38      webp: {
39        placeholder: `${this.assets}/images/captainamerica_1by1_placeholder.webp`,
40        url: `${this.assets}/images/captainamerica_1by1_url.webp`
41      }
42    };
43
44    this.shapeExample = {
45      placeholder: `${this.assets}/images/blackwidow_placeholder.jpg`
46    };
47
48  }
49
50}

Now place the Inputs and their respective variables in the plop-image image component

1<ng-template ngFor let-image [ngForOf]="images">
2  <plop-image class="image" [regular]="image" [description]="'test'" ratio="1by1"></plop-image>
3</ng-template>
4
5<plop-image class="image" [regular]="webpExample.regular" [webp]="webpExample.webp" [description]="'test'" ratio="1by1">
6</plop-image>
7
8<plop-image class="image" [regular]="shapeExample" [description]="'test'" ratio="1by1" inshape></plop-image>

Let's style this

1:host {
2  display: flex;
3  flex-flow: row wrap;
4  justify-content: center;
5}
6
7.image {
8  width: 25%;
9  margin: 1em;
10}

Properties

ImageComponent

• Selector: [plop-image]

Name	Description	Nullable
@Input() regular: Image	Image in any regular format (.png, .jpg).	no
@Input() wep: Image	Image in any webp format.	yes
@Input() ratio: ImageRatio	Image ratio.	no
@Input() inshape: boolean	Image object fit in the center. You can set it true or just right it. Default: false.	yes

Entities

Image

Attribute	Description	Type	Nullable
placeholder	URL of the image to load, this should be the original image, but with a lower quality (to serve as a 'placeholder'), it can be a 100 x 100 resolution to load quickly, few pixels. In the case of only original image (only one URL), this should be either the URL of the original image.	string	no
url	URL of the image to load, this should be the original image.	string	yes

Image Ratio

Image Ratio Type
1by1
16by9
4by3
8by3

Percentage
Number greater than 0 and less than or equal to 1

Dependencies and APIs used to exemplify ngx-image

• Angular Material
• ngx-markdown
• Unsplash

License

This project is licensed under the MIT License - see the LICENSE file for details