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: about 1 month 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 (about 8 years ago)
• Default Branch: master
• Last Pushed: 2023-10-18T03:06:31.000Z (8 months ago)
• Last Synced: 2024-05-03T06:13:36.968Z (about 1 month ago)
• Topics: angular, angular5, fallback, image, image-fallback, placeholder-image
• Language: TypeScript
• Homepage: https://vadimdez.github.io/ngx-img-fallback/
• Size: 35.8 MB
• Stars: 82
• Watchers: 4
• Forks: 11
• Open Issues: 6
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Contributing: CONTRIBUTING.md
  • Funding: .github/FUNDING.yml

Lists

• awesome-ionic2-components - Image Fallback
• angular-awesome-list - ngx-img-fallback
• 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)