# ngx-img-fallback

> Angular5+ directive for image fallback

Latest version **3.0.0** (published 2024-05-20) · MIT license · 0 weekly downloads

## Install

```sh
npm install ngx-img-fallback
pnpm add ngx-img-fallback
yarn add ngx-img-fallback
bun add ngx-img-fallback
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 3.0.0 |
| Published | 2024-05-20 |
| First published | 2017-06-20 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 24.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 82 |
| Author | Vadym Yatsyuk |
| Maintainers | vadimdez |
| Keywords | angular, angular2, angular5, angular5+, img, image, fallback, image-fallback |

## Links

- npm: https://www.npmjs.com/package/ngx-img-fallback
- Repository: https://vadimdez@github.com/VadimDez/ngx-img-fallback
- Homepage: https://github.com/VadimDez/ngx-img-fallback#readme
- Issues: https://github.com/VadimDez/ngx-img-fallback/issues
- npm.io page: https://npm.io/package/ngx-img-fallback

## Dependencies (1)

- [tslib](https://npm.io/package/tslib.md) ^2.3.0

## Alternatives

- [exif-parser](https://npm.io/package/exif-parser.md) — 3.8M weekly downloads
- [vite-plugin-compression](https://npm.io/package/vite-plugin-compression.md) — 569.5K weekly downloads
- [pica](https://npm.io/package/pica.md) — 442.4K weekly downloads
- [@reportportal/client-javascript](https://npm.io/package/@reportportal/client-javascript.md) — 408.8K weekly downloads
- [@tldraw/state](https://npm.io/package/@tldraw/state.md) — 316.0K weekly downloads

## Recent versions

- 3.0.0 (latest) — 2024-05-20
- 2.0.0 — 2022-05-29
- 1.3.4 — 2019-06-12
- 1.3.3 — 2018-02-27
- 1.3.2 — 2018-02-13
- 1.3.1 — 2018-02-02
- 1.3.0 — 2018-01-29
- 1.2.0 — 2017-09-13
- 1.1.3 — 2017-07-25
- 1.1.2 — 2017-07-09
- 1.1.1 — 2017-07-09
- 1.1.0 — 2017-06-22
- 1.0.0 — 2017-06-20

## README

<h1 align="center">Angular 5+ Image Fallback</h1>

<p align="center">
  <a href="https://www.npmjs.com/package/ngx-img-fallback">
    <img src="https://img.shields.io/npm/dm/ngx-img-fallback.svg?style=flat" alt="downloads">
  </a>
  
  <a href="https://www.npmjs.com/package/ng2-img-fallback">
    <img src="https://badge.fury.io/js/ng2-img-fallback.svg" alt="downloads">
  </a>
  
  <a href="https://www.paypal.me/vadimdez">
    <img src="https://img.shields.io/badge/paypal-donate-yellow.svg" alt="downloads">
  </a>
</p>

> 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: '<img src="some_img.png" src-fallback="{{ placeholder }}">'
})
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
<img src="picture1.png" src-fallback="picture2.png" (loaded)="onLoaded($event)"> 
```

## License

[MIT](https://tldrlegal.com/license/mit-license) © [Vadym Yatsyuk](https://github.com/vadimdez)

---
_Source: https://npm.io/package/ngx-img-fallback · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._