Ngx-image NPM | npm.io

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

npm i ngx-image

yarn add ngx-image

Usage

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

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { ImageModule } from 'ngx-image';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    ImageModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

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

import { Component } from '@angular/core';

import { Image } from 'ngx-image';

import { environment } from 'src/environments/environment';

@Component({
  selector: 'plop-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {

  private readonly assets: string;

  images: Image[];
  webpExample: { regular: Image, webp: Image };
  shapeExample: Image;

  constructor() {
    this.assets = `${environment.application.protocol}://${environment.application.host}/${environment.application.assets}`;
    this.images = [
      {
        placeholder: `${this.assets}/images/ironman_1by1_placeholder.jpg`,
        url: `${this.assets}/images/ironman_1by1_url.jpg`
      },
      {
        placeholder: `${this.assets}/images/hulkbuster_1by1_placeholder.jpg`,
        url: `${this.assets}/images/hulkbuster_1by1_url.jpg`
      }
    ];

    this.webpExample = {
      regular: {
        placeholder: `${this.assets}/images/captainamerica_1by1_placeholder.jpg`,
        url: `${this.assets}/images/captainamerica_1by1_url.jpg`
      },
      webp: {
        placeholder: `${this.assets}/images/captainamerica_1by1_placeholder.webp`,
        url: `${this.assets}/images/captainamerica_1by1_url.webp`
      }
    };

    this.shapeExample = {
      placeholder: `${this.assets}/images/blackwidow_placeholder.jpg`
    };

  }

}

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

<ng-template ngFor let-image [ngForOf]="images">
  <plop-image class="image" [regular]="image" [description]="'test'" ratio="1by1"></plop-image>
</ng-template>

<plop-image class="image" [regular]="webpExample.regular" [webp]="webpExample.webp" [description]="'test'" ratio="1by1">
</plop-image>

<plop-image class="image" [regular]="shapeExample" [description]="'test'" ratio="1by1" inshape></plop-image>

Let's style this

:host {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
}

.image {
  width: 25%;
  margin: 1em;
}

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