ngx-img-fallback

KO | EN

gitlite — search

#python #go #golang #machine-learning #rust #linux #nodejs #macos #java #awesome #cli #mcp #ios #openai

ngx-img-fallback

(★ 82)

🖼 Load placeholder image on image error, Angular 5+

ngx-img-fallback 최신버젼 다운로드

최종 버전 다운로드 (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

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

> 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

ngx-img-fallback

ngx-img-fallback 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

ngx-img-fallback

ngx-img-fallback 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README