ngx-img-fallback
v3.0.0TypeScript
Angular5+ directive for image fallback
0/weekUpdated 1 years agoMITUnpacked: 25.5 KB
Published by Vadym Yatsyuk
npm install ngx-img-fallbackAngular 5+ Image Fallback
> Load placeholder image on image error
Angular 5+ directive that loads placeholder image on primary image error.
$3
$3
https://stackblitz.com/edit/ngx-img-fallback
Install
``
npm install ngx-img-fallback --save
For Angular 2+ use version 1.2.0
Usage
In case you're using `SystemJS` see configuration here
Add module to your module's `imports`
`typescript
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app';
import { ImgFallbackModule } from 'ngx-img-fallback';
@NgModule({
imports: [
BrowserModule,
ImgFallbackModule
],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule {}
`
Use it in you component
`typescript
import { Component } from '@angular/core';
@Component({
selector: 'example-app',
template: '
'
})
export class AppComponent {
placeholder = 'http://placehold.it/200x200';
}
`
Events
#### (loaded)
ngx-img-fallback provides (loaded) event which is fired when either src or src-fallback is loaded.(loaded)
To determinate whether original source or fallback is loaded - add a param to your callback for the event.
Example:
First add callback to your component
`typescript`
onLoaded(isFallback: boolean) {
// make somthing based on 'isFallback'
}
and then bind it to the event
`html``