Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/VadimDez/ngx-img-fallback
🖼 Load placeholder image on image error, Angular 5+
https://github.com/VadimDez/ngx-img-fallback
angular angular5 fallback image image-fallback placeholder-image
Last synced: 3 months ago
JSON representation
🖼 Load placeholder image on image error, Angular 5+
- Host: GitHub
- URL: https://github.com/VadimDez/ngx-img-fallback
- Owner: VadimDez
- Created: 2016-06-02T21:25:32.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2024-05-20T16:32:10.000Z (6 months ago)
- Last Synced: 2024-07-25T12:16:15.224Z (3 months ago)
- Topics: angular, angular5, fallback, image, image-fallback, placeholder-image
- Language: TypeScript
- Homepage: https://vadimdez.github.io/ngx-img-fallback/
- Size: 36 MB
- Stars: 82
- Watchers: 4
- Forks: 11
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
Awesome Lists containing this project
- Awesome - Image Fallback
- awesome-angular - ngx-img-fallback - Load placeholder image on image error, Angular 5+. (Table of contents / Third Party Components)
- fucking-awesome-angular - ngx-img-fallback - Load placeholder image on image error, Angular 5+. (Table of contents / Third Party Components)
README
Angular 5+ Image Fallback
> Load placeholder image on image error
Angular 5+ directive that loads placeholder image on primary image error.
### Demo page
[Demo page](https://vadimdez.github.io/ngx-img-fallback/)
### Stackblitz Example
[https://stackblitz.com/edit/ngx-img-fallback](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](https://github.com/VadimDez/ngx-img-fallback/blob/master/SYSTEMJS.md)*
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';
}```
See also [example](https://github.com/VadimDez/ngx-img-fallback/tree/master/example) or [demo page](https://vadimdez.github.io/ngx-img-fallback/)
## Events
#### `(loaded)`
`ngx-img-fallback` provides `(loaded)` event which is fired when either `src` or `src-fallback` is loaded.
To determinate whether original source or fallback is loaded - add a param to your callback for the `(loaded)` event.
Example:First add callback to your component
```typescript
onLoaded(isFallback: boolean) {
// make somthing based on 'isFallback'
}
```
and then bind it to the `loaded` event```html
```## License
[MIT](https://tldrlegal.com/license/mit-license) © [Vadym Yatsyuk](https://github.com/vadimdez)