vadimdez / ngx-img-fallback

🖼 Load placeholder image on image error, Angular 5+

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

Stackblitz Example

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

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

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 or demo page

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

onLoaded(isFallback: boolean) {
  // make somthing based on 'isFallback'
}

and then bind it to the loaded event

<img src="picture1.png" src-fallback="picture2.png" (loaded)="onLoaded($event)"> 

License

MIT © Vadym Yatsyuk

ngx-img-fallback's Issues

404 - page not found

In "README.md" file:

https://github.com/VadimDez/ngx-img-fallback/tree/master/example

Fallback image not loaded when the dynamic image source changed

I'd love to use your library. Thank you for that.

My problem is: I have an image () with a dynamic [src] input.
When the first url is applied -> image not found -> fallback image loaded successfully.
When the second url applied -> image found -> the right image loaded.
But when the third url is applied -> image not found -> fallback image not loaded anymore from now on.

Error Ionic2 run android device

The component work well when i developp using ionic2 on the computer (ionic serve) but it doesn't work when i run the ionic2 app on android phone (ionic run android)

Stacktrace:

[20:10:22] lint finished in 3.89 s
[20:10:22] Error: Unexpected value 'Ng2ImgFallback' declared by the module 'AppModule'
[20:10:22] ngc failed
[20:10:22] ionic-app-script task: "build"
[20:10:22] Error: Error

npm ERR! Windows_NT 10.0.14393
npm ERR! argv "C:\Program Files\nodejs\node.exe" "C:\Users\pegal\AppData\Roaming\npm\node_modules\npm\bin\npm-cli.js" "run" "build"
npm ERR! node v6.9.1
npm ERR! npm v3.10.9
npm ERR! code ELIFECYCLE
npm ERR! ionic-hello-world@ build: ionic-app-scripts build
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the ionic-hello-world@ build script 'ionic-app-scripts build'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the ionic-hello-world package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! ionic-app-scripts build
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs ionic-hello-world
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls ionic-hello-world
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR! D:\Work\WorkspaceIntellij\angular-ionic\cutePuppyPics\npm-debug.log
Caught exception:
undefined

Update to Angular RC6

Action required: Greenkeeper could not be activated 🚨

🚨 You need to enable Continuous Integration on Greenkeeper branches of this repository. 🚨

To enable Greenkeeper, you need to make sure that a commit status is reported on all branches. This is required by Greenkeeper because it uses your CI build statuses to figure out when to notify you about breaking changes.

Since we didn’t receive a CI status on the greenkeeper/initial branch, it’s possible that you don’t have CI set up yet.
We recommend using:

• CircleCI
• Travis CI
• Buildkite
• CodeShip
• Azure Pipelines
• TeamCity
• Buddy
• AppVeyor
  But Greenkeeper will work with every other CI service as well.

If you have already set up a CI for this repository, you might need to check how it’s configured. Make sure it is set to run on all new branches. If you don’t want it to run on absolutely every branch, you can whitelist branches starting with greenkeeper/.

Once you have installed and configured CI on this repository correctly, you’ll need to re-trigger Greenkeeper’s initial pull request. To do this, please click the 'fix repo' button on account.greenkeeper.io.

An in-range update of core-js is breaking the build 🚨

The devDependency core-js was updated from 3.4.6 to 3.4.7.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

core-js is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Status Details

• ❌ ci/circleci: build: Your tests failed on CircleCI (Details).

---

Release Notes for 3.4.7 - 2019.12.03

• Fixed an NPM publishing issue

FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.

---

Your Greenkeeper Bot 🌴

Default placeholder

Provide default placeholder when one is not provided by user

Can't find main.d.ts file

When using newer version of typescript I get typings/main.d.ts not found error. Typings no loonger creates neither main.d.ts nor browser.d.ts, instead only sing file index.d.ts
See typings/typings#151

Update how-to to Angular RC6

loaded event does not fire on fallback

1. use bad image and valid placeholder, ex

 <img src="not-working-image" alt="not working image with working fallback" [src-fallback]="workingPlaceholder" (loaded)="onLoad($event)">

2. Wait until the placeholder loads

Expected
onLoad to be called with true
Actual
onLoad not called

Error: Please add a @NgModule annotation in 1.3.0

Seems like the latest 1.3.0 release is missing some metadata as I get the following error:

ERROR in : Unexpected value 'ImgFallbackModule in <path-to-project>/node_modules/ngx-img-fallback/src/app/modules/ngx-img-fallback/ngx-img-fallback.module.d.ts' imported by the module 'SharedModule in <path-to-project>/src/app/shared/shared.module.ts'. Please add a @NgModule annotation.

Downgrading to 1.2.0 fixes this issue.

Invalid certificate for fallback image in demo

Error: https://placehold.it/100x100 net::ERR_CERT_DATE_INVALID

Rename project

Rename this project from ng2-img-fallback to ngx-img-fallback.

Upgrade project to angular 13

Upgrade Angular

Upgrade Angular and dependencies

angular4

any plans to support angular4?

Upgrade project to angular 16

Directive is not fired

@VadimDez I tried to use the src-fallback directive but it doesn't work. Here is how I used it:

<div  *ngFor="let product of products; let i = index">
    <a [routerLink]="['/products/details', product.id]">
          <img class="img-responsive" [src]="product.image" src-fallback="product.cdnImage" alt="" (loaded)="onLoaded($event)">
     </a>
</div>

product.image: A failed image URL (doesn't exist).
product.cdnImage: A valid image URL.

Also when using [src-fallback] I get [Angular] Can't bind to 'src-fallback' since it isn't a known property of 'img'.

The onLoaded event doesn't event fire. Am i doing something wrong? I have imported the ImgFallbackModule as you described. I work on VS 2017 dotnet core Angular 4+ template which uses webpack, if that helps you.

0.1.3

Support for background image fallback

Currently there is no support for background image fallback. It would be really helpful if we can support it by introducing another directive.

Update to angular2.0.0-rc.5

Please support SSR -> ERROR { TypeError: this.el.addEventListener is not a function at ImgFallbackDirective.addEvents

i am using angular universal app which will be rendered on the server side with nodejs.
Since in the nodejs environment there is objects like window... document and more, the platform will not recognize the addEventListener as function.

-->

ERROR { TypeError: this.el.addEventListener is not a function at ImgFallbackDirective.addEvents (/Users/../node_modules/ngx-img-fallback/dist/src/ngx-img-fallback.directive.js:36:17) __zone_symbol__currentTask: ZoneTask { _zone: Zone { _properties: [Object], _parent: [Object], _name: 'angular', _zoneDelegate: [Object] }, runCount: 0, _zoneDelegates: null, _state: 'notScheduled', type: 'microTask', source: 'Promise.then', data: undefined, scheduleFn: undefined, cancelFn: null, callback: [Function], invoke: [Function] } }

solution: maybe a fallback strategy for server side rendering will be great !!!

Thank you

Test webpack compatibility

Update peer dependency

npm WARN [email protected] requires a peer of @angular/[email protected] but none was installed.

Wrong contents for 1.1.2 in npm

To reproduce:

$ mkdir from_source
$ cd from_source
$ git clone https://github.com/VadimDez/ngx-img-fallback.git
$ cd ngx-img-fallback
$ git checkout 1.1.2
$ npm install
$ npm run build
$ cd ../..
$ mkdir from_npm
$ cd from_npm
$ curl -O https://registry.npmjs.org/ngx-img-fallback/-/ngx-img-fallback-1.1.2.tgz
$ tar -xzf ngx-img-fallback-1.1.2.tgz
$ diff package/dist/bundles/ngx-img-fallback.umd.js ../from_source/ngx-img-fallback/dist/bundles/ngx-img-fallback.umd.js
23,24c23,25
<         this.el.addEventListener(this.ERROR_EVENT_TYPE, this.onError.bind(this));
<         this.el.addEventListener(this.LOAD_EVENT_TYPE, this.onLoad.bind(this));
---
>         this.onError = this.onError.bind(this);
>         this.onLoad = this.onLoad.bind(this);
>         this.addEvents();
26c27
<     ImgFallbackDirective.prototype.onError = function () {
---
>     ImgFallbackDirective.prototype.ngOnDestroy = function () {
28c29,32
<         if (!this.isApplied) {
---
>         this.removeOnLoadEvent();
>     };
>     ImgFallbackDirective.prototype.onError = function () {
>         if (this.el.getAttribute('src') !== this.imgSrc) {
43,45c47,49
<     ImgFallbackDirective.prototype.ngOnDestroy = function () {
<         this.removeErrorEvent();
<         this.removeOnLoadEvent();
---
>     ImgFallbackDirective.prototype.addEvents = function () {
>         this.el.addEventListener(this.ERROR_EVENT_TYPE, this.onError);
>         this.el.addEventListener(this.LOAD_EVENT_TYPE, this.onLoad);
55c59
<     __metadata("design:type", _angular_core.EventEmitter)
---
>     __metadata("design:type", Object)

property update

is there a way to check if source loaded or not and bind that to a variable?

Angular 5

Update to Angular 5?