NG2 SRC FALLBACK

An Angular directive that substitutes the primary image with a fallback should it fail to load.

Features

• Default fallback - If at first you don't succeed, provide a fallback image to [srcFallback] input
• On-The-Fly Fallback creation - If for some reason you don't have an image to set as fallback, check the [customFallbackConfig]

Install

npm i --save ng2-src-fallback

Basic Usage

Add the Ng2SrcFallbackModule module to your module's imports

import {NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {AppComponent} from './app.component';
import {Ng2SrcFallbackModule} from 'ng2-src-fallback';

@NgModule({
	imports: [
		BrowserModule,
		Ng2SrcFallbackModule
	],
	declarations: [AppComponent],
	bootstrap: [AppComponent]
})

export class AppModule {}

Then add it to your component

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

@Component({
  	selector: 'neat-app',
  	template: `
	  	<img
	  		src="can_of_beans.png"
			ng2-src-fallback
			[srcFallback]="fallbackImgURL">
	`
})

export class AppComponent {
  	public fallbackImgURL = 'http://placehold.it/200x200';
}

[customFallbackConfig]

Let's say, for some reason, you don't have an image you can use as fallback. Instead of providing a value to the [srcFallback] input, you can use the [customFallbackConfig] to generate 'On-The-Fly' custom placeholder images.

ICustomFallbackConfig

| Name | Type | Required | Description | |----------------------|:-----------------------------------:|:-------------------------:|------------------------------------------------------------------------------------------------------------------------------------------------------------------| | height | String (numeric value and CSS unit) | yes | Height of the generated Image | | width | String (numeric value and CSS unit) | yes | Width of the generated Image | | bgColour | String | no | Background colour of the generated Image (String) | | textSizeAndFont | String (CSS font property syntax) | no | Styling of the Text inside the generated Image | | textColour | String | no | Colour of the Text inside the generated Image | | textContent | String | no | The text you want to display inside the generated Image | | textAlign | CanvasTextAlign | no | The alignment of the text you want to display inside the generated Image | textBaseline | CanvasTextBaseline | no | The Baseline alignment of the text you want to display inside the generated Image | mimeType | String: 'jpeg' | 'png' | no | The mime type of the generated Image

Usage

Add the Ng2SrcFallbackModule module to your module's imports

import {NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {AppComponent} from './app';
import {Ng2SrcFallbackModule} from 'ng2-src-fallback';

@NgModule({
	imports: [
		BrowserModule,
		Ng2SrcFallbackModule
	],
	declarations: [AppComponent],
	bootstrap: [AppComponent]
})

export class AppModule {}

Then add it to your component and provide a configuration object to the [customFallbackConfig] input

import {Component} from '@angular/core';
import {ICustomFallbackConfig} from 'ng2-src-fallback/custom-fallback-config';

@Component({
  	selector: 'neat-app',
  	template: `
	  	<img
	  		src="can_of_beans.png"
			ng2-src-fallback
			[customFallbackConfig]="customFallbackConfig">
	`
})

export class AppComponent {
	public customFallbackConfig: ICustomFallbackConfig = {
		height: '200px',
		width: '200px',
		bgColour: 'black',
		textSizeAndFont: '20px sans-serif',
		textColour: 'white',
		textContent: '200x200',
		textAlign: 'center',
		textBaseline: 'middle',
		mimeType: 'jpeg'
	};
}

Events

(wasLoaded)

ng2-src-fallback exposes a (wasLoaded) event that emits when either the src or srcFallback is loaded. To determine whether the original source or the fallback was loaded, add a param to your callback for the (wasLoaded) event.

Example:

First add callback to your component

wasLoaded(isFallback: boolean) {
	// do something based on 'isFallback'
	// or console.log it, don't just take my word
}

and then bind it to the wasLoaded event

<img
	src="a_cat.png"
	ng2-src-fallback
	[srcFallback]="'picture2.png'"
	(wasLoaded)="wasLoaded($event)">

License

MIT © Jaime 'Gondola' Oliveira