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
;;;;
Then add it to your component
;
[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
;;;;
Then add it to your component and provide a configuration object to the [customFallbackConfig]
input
;;
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
wasLoadedisFallback: boolean
and then bind it to the wasLoaded
event