├── .babelrc
├── LICENSE
├── README.md
├── angular.dcb-img-fallback.js
├── angular.dcb-img-fallback.min.js
├── angular.dcb-img-fallback.min.js.map
├── bower.json
├── example
    ├── example-custom.html
    └── example-default.html
└── package.json


/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 |   "presets": [
3 |     "es2015"
4 |   ]
5 | }


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2014 Daniel Cohen
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of
 6 | this software and associated documentation files (the "Software"), to deal in
 7 | the Software without restriction, including without limitation the rights to
 8 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
 9 | the Software, and to permit persons to whom the Software is furnished to do so,
10 | subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
17 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
18 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
19 | IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
20 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
21 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | Angular Image Fallback
 2 | ======================
 3 | 
 4 | Angular directives that handles image loading, it has `fallback-src` to handle errors in image loading and `loading-src` for placeholder while the image is being loaded.
 5 | 
 6 | ## Bower Download
 7 | `bower install angular-img-fallback`
 8 | 
 9 | 
10 | ## Installation
11 | 1. Download and import the plugin script.<br />
12 | `<script src="lib/angular-img-fallback/angular.dcb-img-fallback.min.js"></script>`
13 | 2. Add `dcbImgFallback` to your angular app module dependencies list.<br />
14 | `angular.module('myAngularApp', ['dcbImgFallback']);`
15 | 3. Add the `fallback-src` attribute to your img<br />
16 | `<img ng-src="{{'path/to/img.jpg'}}" fallback-src />`
17 | 
18 | 
19 | ## Usage
20 | Just add the `fallback-src` and the `loading-src` attributes to your `<img />` tags<br />
21 | `<img ng-src="{{'path/to/img.jpg'}}" fallback-src loading-src />`<br />
22 | Make sure you use `ng-src` as your image src attribute.
23 | 
24 | 
25 | ## Advanced options
26 | - Simple usage, will replace to a default missing image placeholder<br />
27 | `<img ng-src="{{'path/to/img.jpg'}}" fallback-src />`
28 | 
29 | - Custom fallback, will replace to your own custom missing image<br />
30 | `<img ng-src="{{'path/to/img.jpg'}}" fallback-src="{{'path/to/fallback.jpg'}}" />`
31 | 
32 | - Loading placeholder, show a loading placeholder until image loads<br />
33 | `<img ng-src="{{'path/to/img.jpg'}}" loading-src />`
34 | 
35 | - Custom Loading placeholder, show a custom image loading placeholder until image loads<br />
36 | `<img ng-src="{{'path/to/img.jpg'}}" loading-src="{{'path/to/loading.jpg'}}" />`
37 | 
38 | - Or both! loading placeholder and a fallback source can work together<br />
39 | `<img ng-src="{{'path/to/img.jpg'}}" loading-src fallback-src />`
40 | 
41 | 
42 | ## Icons license
43 | Icons are provided from http://icomoon.io/ under the GNU General Public License v3.0<br />
44 | http://www.gnu.org/licenses/gpl.html
45 | 
46 | 
47 | ## Contributing
48 | 
49 | We use Babel to compile the es6 code to es5 and uglify-js to minify the code even more.
50 | it's already setup, all you need to do is install dependencies using `$ npm install` and run `$ npm run build`.


--------------------------------------------------------------------------------
/angular.dcb-img-fallback.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Angular Image Fallback
 3 |  * (c) 2014-2016 Daniel Cohen. http://dcb.co.il
 4 |  * License: MIT
 5 |  * https://github.com/dcohenb/angular-img-fallback
 6 |  */
 7 | (function () {
 8 |     angular.module('dcbImgFallback', [])
 9 | 
10 |         .directive('fallbackSrc', ['imageService', imageService => {
11 | 
12 |             return {
13 |                 restrict: 'A',
14 |                 link: (scope, element, attr) => {
15 | 
16 |                     // Update the service with the correct missing src if present, otherwise use the default image
17 |                     let newSrc = attr.fallbackSrc ? imageService.setMissing(attr.fallbackSrc) : imageService.getMissing();
18 | 
19 |                     // Listen for errors on the element and if there are any replace the source with the fallback source
20 |                     let errorHandler = () => {
21 | 
22 |                         // fallbackSrc may have changed since the link function ran, so try to grab it again.
23 |                         let newSrc = attr.fallbackSrc ? imageService.setMissing(attr.fallbackSrc) : imageService.getMissing();
24 | 
25 |                         if (element[0].src !== newSrc) {
26 |                             element[0].src = newSrc;
27 |                         }
28 |                     };
29 | 
30 |                     // Replace the loading image with missing image if `ng-src` link was broken
31 |                     if (element[0].src === imageService.getLoading()) {
32 |                         element[0].src = newSrc;
33 |                     }
34 | 
35 |                     element.on('error', errorHandler);
36 | 
37 |                     scope.$on('$destroy', () => {
38 |                         element.off('error', errorHandler);
39 |                     });
40 | 
41 |                 }
42 |             };
43 |         }])
44 | 
45 | 
46 |         .directive('loadingSrc', ['$interpolate', 'imageService', ($interpolate, imageService) => {
47 | 
48 |             // Load the image source in the background and replace the element source once it's ready
49 |             let linkFunction = (scope, element, attr) => {
50 |                 // Update the service with the correct loading src if present, otherwise use the default image
51 |                 element[0].src = attr.loadingSrc ? imageService.setLoading(attr.loadingSrc) : imageService.getLoading();
52 | 
53 |                 let img = new Image();
54 |                 img.src = $interpolate(attr.imgSrc)(scope);
55 | 
56 |                 img.onload = () => {
57 |                     img.onload = null;
58 |                     if (element[0].src !== img.src) {
59 |                         element[0].src = img.src;
60 |                     }
61 |                 };
62 |             };
63 | 
64 |             return {
65 |                 restrict: 'A',
66 |                 compile: (el, attr) => {
67 |                     // Take over the ng-src attribute to stop it from loading the image
68 |                     attr.imgSrc = attr.ngSrc;
69 |                     delete attr.ngSrc;
70 | 
71 |                     return linkFunction;
72 |                 }
73 |             };
74 |         }])
75 | 
76 |         .factory('imageService', () => {
77 |             // Both images have the same prefix we can save some space on that
78 |             let base64prefix = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAwIDEwMDAiPjxkZWZzPjxyYWRpYWxHcmFkaWVudCBpZD0icmFkaWFsLWdyYWRpZW50IiBjeD0iNTAwIiBjeT0iNTAwIiByPSI1MDAiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj48c3RvcCBvZmZzZXQ9IjAiIHN0b3AtY29sb3I9IiNkZmRmZGYiLz48c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiM5OTkiLz48L3JhZGlhbEdyYWRpZW50PjwvZGVmcz48cmVjdCBmaWxsPSJ1cmwoI3JhZGlhbC1ncmFkaWVudCkiIHdpZHRoPSIxMDAwIiBoZWlnaHQ9IjEwMDAiLz48cGF0aCBmaWxsPSIjZmZmIiBkPSJNNjAxIDQxNGwwIDBWNTg2bDAgMEgzOTlsMCAwVjQxNGwwIDBINjAxWm0wLTE0SDM5OUExNCAxNCAwIDAgMCAzODUgNDE0djE3M2ExNCAxNCAwIDAgMCAxNCAxNEg2MDFBMTQgMTQgMCAwIDAgNjE1IDU4NlY0MTRhMTQgMTQgMCAwIDAtMTQtMTRoMFpNNTc';
79 | 
80 |             let loadingDefault = `${base64prefix}1IDUwMmE3NyA3NyAwIDAgMC0yNC01NCA3NiA3NiAwIDAgMC0yNS0xNiA3NSA3NSAwIDAgMC01NyAxQTc0IDc0IDAgMCAwIDQzMCA0NzQgNzMgNzMgMCAwIDAgNDMxIDUzMGE3MiA3MiAwIDAgMCAzOSAzOCA3MCA3MCAwIDAgMCA1NC0xIDY5IDY5IDAgMCAwIDM3LTM4IDY4IDY4IDAgMCAwIDQtMTZsMSAwYTEwIDEwIDAgMCAwIDEwLTEwYzAgMCAwLTEgMC0xaDBabS0xNSAyNmE2NyA2NyAwIDAgMS0zNyAzNSA2NiA2NiAwIDAgMS01MC0xIDY0IDY0IDAgMCAxLTM0LTM1QTYzIDYzIDAgMCAxIDQ0MCA0NzkgNjIgNjIgMCAwIDEgNDU0IDQ1OSA2MiA2MiAwIDAgMSA0NzQgNDQ2YTYxIDYxIDAgMCAxIDIzLTQgNjAgNjAgMCAwIDEgNDIgMTlBNTkgNTkgMCAwIDEgNTUyIDQ4MGE1OCA1OCAwIDAgMSA0IDIyaDBjMCAwIDAgMSAwIDFhMTAgMTAgMCAwIDAgOSAxMCA2NyA2NyAwIDAgMS01IDE1aDBaIi8+PC9zdmc+`;
81 |             let missingDefault = `${base64prefix}yIDQ1MGEyMiAyMiAwIDEgMS0yMi0yMkEyMiAyMiAwIDAgMSA1NzIgNDUwWk01ODYgNTcySDQxNFY1NDNsNTAtODYgNTggNzJoMTRsNTAtNDN2ODZaIi8+PC9zdmc+`;
82 | 
83 |             return {
84 |                 getLoading: () => {
85 |                     return loadingDefault;
86 |                 },
87 |                 getMissing: () => {
88 |                     return missingDefault;
89 |                 },
90 |                 setLoading: (newSrc) => {
91 |                     return loadingDefault = newSrc;
92 |                 },
93 |                 setMissing: (newSrc) => {
94 |                     return missingDefault = newSrc;
95 |                 }
96 |             };
97 |         });
98 | }());


--------------------------------------------------------------------------------
/angular.dcb-img-fallback.min.js:
--------------------------------------------------------------------------------
1 | "use strict";!function(){angular.module("dcbImgFallback",[]).directive("fallbackSrc",["imageService",function(A){return{restrict:"A",link:function(M,g,I){var i=I.fallbackSrc?A.setMissing(I.fallbackSrc):A.getMissing(),D=function(){var M=I.fallbackSrc?A.setMissing(I.fallbackSrc):A.getMissing();g[0].src!==M&&(g[0].src=M)};g[0].src===A.getLoading()&&(g[0].src=i),g.on("error",D),M.$on("$destroy",function(){g.off("error",D)})}}}]).directive("loadingSrc",["$interpolate","imageService",function(A,M){var g=function(g,I,i){I[0].src=i.loadingSrc?M.setLoading(i.loadingSrc):M.getLoading();var D=new Image;D.src=A(i.imgSrc)(g),D.onload=function(){D.onload=null,I[0].src!==D.src&&(I[0].src=D.src)}};return{restrict:"A",compile:function(A,M){return M.imgSrc=M.ngSrc,delete M.ngSrc,g}}}]).factory("imageService",function(){var A="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAwIDEwMDAiPjxkZWZzPjxyYWRpYWxHcmFkaWVudCBpZD0icmFkaWFsLWdyYWRpZW50IiBjeD0iNTAwIiBjeT0iNTAwIiByPSI1MDAiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj48c3RvcCBvZmZzZXQ9IjAiIHN0b3AtY29sb3I9IiNkZmRmZGYiLz48c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiM5OTkiLz48L3JhZGlhbEdyYWRpZW50PjwvZGVmcz48cmVjdCBmaWxsPSJ1cmwoI3JhZGlhbC1ncmFkaWVudCkiIHdpZHRoPSIxMDAwIiBoZWlnaHQ9IjEwMDAiLz48cGF0aCBmaWxsPSIjZmZmIiBkPSJNNjAxIDQxNGwwIDBWNTg2bDAgMEgzOTlsMCAwVjQxNGwwIDBINjAxWm0wLTE0SDM5OUExNCAxNCAwIDAgMCAzODUgNDE0djE3M2ExNCAxNCAwIDAgMCAxNCAxNEg2MDFBMTQgMTQgMCAwIDAgNjE1IDU4NlY0MTRhMTQgMTQgMCAwIDAtMTQtMTRoMFpNNTc",M=A+"1IDUwMmE3NyA3NyAwIDAgMC0yNC01NCA3NiA3NiAwIDAgMC0yNS0xNiA3NSA3NSAwIDAgMC01NyAxQTc0IDc0IDAgMCAwIDQzMCA0NzQgNzMgNzMgMCAwIDAgNDMxIDUzMGE3MiA3MiAwIDAgMCAzOSAzOCA3MCA3MCAwIDAgMCA1NC0xIDY5IDY5IDAgMCAwIDM3LTM4IDY4IDY4IDAgMCAwIDQtMTZsMSAwYTEwIDEwIDAgMCAwIDEwLTEwYzAgMCAwLTEgMC0xaDBabS0xNSAyNmE2NyA2NyAwIDAgMS0zNyAzNSA2NiA2NiAwIDAgMS01MC0xIDY0IDY0IDAgMCAxLTM0LTM1QTYzIDYzIDAgMCAxIDQ0MCA0NzkgNjIgNjIgMCAwIDEgNDU0IDQ1OSA2MiA2MiAwIDAgMSA0NzQgNDQ2YTYxIDYxIDAgMCAxIDIzLTQgNjAgNjAgMCAwIDEgNDIgMTlBNTkgNTkgMCAwIDEgNTUyIDQ4MGE1OCA1OCAwIDAgMSA0IDIyaDBjMCAwIDAgMSAwIDFhMTAgMTAgMCAwIDAgOSAxMCA2NyA2NyAwIDAgMS01IDE1aDBaIi8+PC9zdmc+",g=A+"yIDQ1MGEyMiAyMiAwIDEgMS0yMi0yMkEyMiAyMiAwIDAgMSA1NzIgNDUwWk01ODYgNTcySDQxNFY1NDNsNTAtODYgNTggNzJoMTRsNTAtNDN2ODZaIi8+PC9zdmc+";return{getLoading:function(){return M},getMissing:function(){return g},setLoading:function(A){return M=A},setMissing:function(A){return g=A}}})}();


--------------------------------------------------------------------------------
/angular.dcb-img-fallback.min.js.map:
--------------------------------------------------------------------------------
1 | {"version":3,"sources":["angular.dcb-img-fallback.js"],"names":[],"mappings":";;AAMC,aAAY;AACT,YAAQ,MAAR,CAAe,gBAAf,EAAiC,EAAjC,EAEK,SAFL,CAEe,aAFf,EAE8B,CAAC,cAAD,EAAiB,wBAAgB;;AAEvD,eAAO;AACH,sBAAU,GADP;AAEH,kBAAM,cAAC,KAAD,EAAQ,OAAR,EAAiB,IAAjB,EAA0B;AAG5B,oBAAI,SAAS,KAAK,WAAL,GAAmB,aAAa,UAAb,CAAwB,KAAK,WAA7B,CAAnB,GAA+D,aAAa,UAAb,EAA5E;;AAGA,oBAAI,eAAe,SAAf,YAAe,GAAM;AAGrB,wBAAI,SAAS,KAAK,WAAL,GAAmB,aAAa,UAAb,CAAwB,KAAK,WAA7B,CAAnB,GAA+D,aAAa,UAAb,EAA5E;;AAEA,wBAAI,QAAQ,CAAR,EAAW,GAAX,KAAmB,MAAvB,EAA+B;AAC3B,gCAAQ,CAAR,EAAW,GAAX,GAAiB,MAAjB;AACH;AACJ,iBARD;;AAWA,oBAAI,QAAQ,CAAR,EAAW,GAAX,KAAmB,aAAa,UAAb,EAAvB,EAAkD;AAC9C,4BAAQ,CAAR,EAAW,GAAX,GAAiB,MAAjB;AACH;;AAED,wBAAQ,EAAR,CAAW,OAAX,EAAoB,YAApB;;AAEA,sBAAM,GAAN,CAAU,UAAV,EAAsB,YAAM;AACxB,4BAAQ,GAAR,CAAY,OAAZ,EAAqB,YAArB;AACH,iBAFD;AAIH;AA7BE,SAAP;AA+BH,KAjCyB,CAF9B,EAsCK,SAtCL,CAsCe,YAtCf,EAsC6B,CAAC,cAAD,EAAiB,cAAjB,EAAiC,UAAC,YAAD,EAAe,YAAf,EAAgC;AAGtF,YAAI,eAAe,SAAf,YAAe,CAAC,KAAD,EAAQ,OAAR,EAAiB,IAAjB,EAA0B;AAEzC,oBAAQ,CAAR,EAAW,GAAX,GAAiB,KAAK,UAAL,GAAkB,aAAa,UAAb,CAAwB,KAAK,UAA7B,CAAlB,GAA6D,aAAa,UAAb,EAA9E;;AAEA,gBAAI,MAAM,IAAI,KAAJ,EAAV;AACA,gBAAI,GAAJ,GAAU,aAAa,KAAK,MAAlB,EAA0B,KAA1B,CAAV;;AAEA,gBAAI,MAAJ,GAAa,YAAM;AACf,oBAAI,MAAJ,GAAa,IAAb;AACA,oBAAI,QAAQ,CAAR,EAAW,GAAX,KAAmB,IAAI,GAA3B,EAAgC;AAC5B,4BAAQ,CAAR,EAAW,GAAX,GAAiB,IAAI,GAArB;AACH;AACJ,aALD;AAMH,SAbD;;AAeA,eAAO;AACH,sBAAU,GADP;AAEH,qBAAS,iBAAC,EAAD,EAAK,IAAL,EAAc;AAEnB,qBAAK,MAAL,GAAc,KAAK,KAAnB;AACA,uBAAO,KAAK,KAAZ;;AAEA,uBAAO,YAAP;AACH;AARE,SAAP;AAUH,KA5BwB,CAtC7B,EAoEK,OApEL,CAoEa,cApEb,EAoE6B,YAAM;AAE3B,YAAI,eAAe,2qBAAnB;;AAEA,YAAI,iBAAoB,YAApB,smBAAJ;AACA,YAAI,iBAAoB,YAApB,kIAAJ;;AAEA,eAAO;AACH,wBAAY,sBAAM;AACd,uBAAO,cAAP;AACH,aAHE;AAIH,wBAAY,sBAAM;AACd,uBAAO,cAAP;AACH,aANE;AAOH,wBAAY,oBAAC,MAAD,EAAY;AACpB,uBAAO,iBAAiB,MAAxB;AACH,aATE;AAUH,wBAAY,oBAAC,MAAD,EAAY;AACpB,uBAAO,iBAAiB,MAAxB;AACH;AAZE,SAAP;AAcH,KAzFL;AA0FH,CA3FA,GAAD","file":"angular.dcb-img-fallback.min.js","sourcesContent":["/**\r\n * Angular Image Fallback\r\n * (c) 2014-2016 Daniel Cohen. http://dcb.co.il\r\n * License: MIT\r\n * https://github.com/dcohenb/angular-img-fallback\r\n */\r\n(function () {\r\n    angular.module('dcbImgFallback', [])\r\n\r\n        .directive('fallbackSrc', ['imageService', imageService => {\r\n\r\n            return {\r\n                restrict: 'A',\r\n                link: (scope, element, attr) => {\r\n\r\n                    // Update the service with the correct missing src if present, otherwise use the default image\r\n                    let newSrc = attr.fallbackSrc ? imageService.setMissing(attr.fallbackSrc) : imageService.getMissing();\r\n\r\n                    // Listen for errors on the element and if there are any replace the source with the fallback source\r\n                    let errorHandler = () => {\r\n\r\n                        // fallbackSrc may have changed since the link function ran, so try to grab it again.\r\n                        let newSrc = attr.fallbackSrc ? imageService.setMissing(attr.fallbackSrc) : imageService.getMissing();\r\n\r\n                        if (element[0].src !== newSrc) {\r\n                            element[0].src = newSrc;\r\n                        }\r\n                    };\r\n\r\n                    // Replace the loading image with missing image if `ng-src` link was broken\r\n                    if (element[0].src === imageService.getLoading()) {\r\n                        element[0].src = newSrc;\r\n                    }\r\n\r\n                    element.on('error', errorHandler);\r\n\r\n                    scope.$on('$destroy', () => {\r\n                        element.off('error', errorHandler);\r\n                    });\r\n\r\n                }\r\n            };\r\n        }])\r\n\r\n\r\n        .directive('loadingSrc', ['$interpolate', 'imageService', ($interpolate, imageService) => {\r\n\r\n            // Load the image source in the background and replace the element source once it's ready\r\n            let linkFunction = (scope, element, attr) => {\r\n                // Update the service with the correct loading src if present, otherwise use the default image\r\n                element[0].src = attr.loadingSrc ? imageService.setLoading(attr.loadingSrc) : imageService.getLoading();\r\n\r\n                let img = new Image();\r\n                img.src = $interpolate(attr.imgSrc)(scope);\r\n\r\n                img.onload = () => {\r\n                    img.onload = null;\r\n                    if (element[0].src !== img.src) {\r\n                        element[0].src = img.src;\r\n                    }\r\n                };\r\n            };\r\n\r\n            return {\r\n                restrict: 'A',\r\n                compile: (el, attr) => {\r\n                    // Take over the ng-src attribute to stop it from loading the image\r\n                    attr.imgSrc = attr.ngSrc;\r\n                    delete attr.ngSrc;\r\n\r\n                    return linkFunction;\r\n                }\r\n            };\r\n        }])\r\n\r\n        .factory('imageService', () => {\r\n            // Both images have the same prefix we can save some space on that\r\n            let base64prefix = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAwIDEwMDAiPjxkZWZzPjxyYWRpYWxHcmFkaWVudCBpZD0icmFkaWFsLWdyYWRpZW50IiBjeD0iNTAwIiBjeT0iNTAwIiByPSI1MDAiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj48c3RvcCBvZmZzZXQ9IjAiIHN0b3AtY29sb3I9IiNkZmRmZGYiLz48c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiM5OTkiLz48L3JhZGlhbEdyYWRpZW50PjwvZGVmcz48cmVjdCBmaWxsPSJ1cmwoI3JhZGlhbC1ncmFkaWVudCkiIHdpZHRoPSIxMDAwIiBoZWlnaHQ9IjEwMDAiLz48cGF0aCBmaWxsPSIjZmZmIiBkPSJNNjAxIDQxNGwwIDBWNTg2bDAgMEgzOTlsMCAwVjQxNGwwIDBINjAxWm0wLTE0SDM5OUExNCAxNCAwIDAgMCAzODUgNDE0djE3M2ExNCAxNCAwIDAgMCAxNCAxNEg2MDFBMTQgMTQgMCAwIDAgNjE1IDU4NlY0MTRhMTQgMTQgMCAwIDAtMTQtMTRoMFpNNTc';\r\n\r\n            let loadingDefault = `${base64prefix}1IDUwMmE3NyA3NyAwIDAgMC0yNC01NCA3NiA3NiAwIDAgMC0yNS0xNiA3NSA3NSAwIDAgMC01NyAxQTc0IDc0IDAgMCAwIDQzMCA0NzQgNzMgNzMgMCAwIDAgNDMxIDUzMGE3MiA3MiAwIDAgMCAzOSAzOCA3MCA3MCAwIDAgMCA1NC0xIDY5IDY5IDAgMCAwIDM3LTM4IDY4IDY4IDAgMCAwIDQtMTZsMSAwYTEwIDEwIDAgMCAwIDEwLTEwYzAgMCAwLTEgMC0xaDBabS0xNSAyNmE2NyA2NyAwIDAgMS0zNyAzNSA2NiA2NiAwIDAgMS01MC0xIDY0IDY0IDAgMCAxLTM0LTM1QTYzIDYzIDAgMCAxIDQ0MCA0NzkgNjIgNjIgMCAwIDEgNDU0IDQ1OSA2MiA2MiAwIDAgMSA0NzQgNDQ2YTYxIDYxIDAgMCAxIDIzLTQgNjAgNjAgMCAwIDEgNDIgMTlBNTkgNTkgMCAwIDEgNTUyIDQ4MGE1OCA1OCAwIDAgMSA0IDIyaDBjMCAwIDAgMSAwIDFhMTAgMTAgMCAwIDAgOSAxMCA2NyA2NyAwIDAgMS01IDE1aDBaIi8+PC9zdmc+`;\r\n            let missingDefault = `${base64prefix}yIDQ1MGEyMiAyMiAwIDEgMS0yMi0yMkEyMiAyMiAwIDAgMSA1NzIgNDUwWk01ODYgNTcySDQxNFY1NDNsNTAtODYgNTggNzJoMTRsNTAtNDN2ODZaIi8+PC9zdmc+`;\r\n\r\n            return {\r\n                getLoading: () => {\r\n                    return loadingDefault;\r\n                },\r\n                getMissing: () => {\r\n                    return missingDefault;\r\n                },\r\n                setLoading: (newSrc) => {\r\n                    return loadingDefault = newSrc;\r\n                },\r\n                setMissing: (newSrc) => {\r\n                    return missingDefault = newSrc;\r\n                }\r\n            };\r\n        });\r\n}());"]}


--------------------------------------------------------------------------------
/bower.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "angular-img-fallback",
 3 |   "version": "0.2.0",
 4 |   "description": "Utility to work with loading images, has fallback-src to handle errors in image loading and loading-src for images loading placeholders.",
 5 |   "main": "angular.dcb-img-fallback.js",
 6 |   "keywords": [
 7 |     "angularjs",
 8 |     "images",
 9 |     "error handling"
10 |   ],
11 |   "authors": [
12 |     "Daniel Cohen <dcohenb@gmail.com>"
13 |   ],
14 |   "license": "MIT",
15 |   "homepage": "https://github.com/dcohenb/angular-img-fallback",
16 |   "ignore": [
17 |     "angular.dcb-img-fallback.js",
18 |     "example",
19 |     "README.md"
20 |   ]
21 | }
22 | 


--------------------------------------------------------------------------------
/example/example-custom.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en" ng-app="app">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <title>Angular image fallback example</title>
 6 |     <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script>
 7 |     <script src="../angular.dcb-img-fallback.js"></script>
 8 | </head>
 9 | <body>
10 | 
11 | <h1>Note!</h1>
12 | <p>Once you set a custom fallback or loading source all other images using the directive will be effected.</p>
13 | 
14 | <div>
15 |     <h3>Custom fallback image</h3>
16 |     <img ng-src="invalid-image.jpg" fallback-src="{{'https://dcb.co.il/angular-image-fallback/fallback.png'}}" height="300"/>
17 | 
18 |     <p>Default fallback image is now set to the custom url provided before</p>
19 |     <img ng-src="invalid-image.jpg" fallback-src height="300"/>
20 | </div>
21 | 
22 | <div>
23 |     <h3>Custom loading image</h3>
24 |     <img ng-src="{{'https://dcb.co.il/angular-image-fallback/high-res.jpg'}}" loading-src="{{'https://dcb.co.il/angular-image-fallback/loading.jpg'}}" height="300"/>
25 | 
26 |     <p>Default loading image is now set to the custom url provided before</p>
27 |     <img ng-src="{{'https://dcb.co.il/angular-image-fallback/high-res.jpg'}}" loading-src height="300"/>
28 | </div>
29 | 
30 | 
31 | <script>
32 |     angular.module('app', ['dcbImgFallback']);
33 | </script>
34 | </body>
35 | </html>


--------------------------------------------------------------------------------
/example/example-default.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en" ng-app="app">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <title>Angular image fallback example</title>
 6 |     <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script>
 7 |     <script src="../angular.dcb-img-fallback.js"></script>
 8 | </head>
 9 | <body>
10 | 
11 | <div>
12 |     <h3>Default fallback image</h3>
13 |     <img ng-src="invalid-image.jpg" fallback-src height="300"/>
14 | </div>
15 | 
16 | <div>
17 |     <h3>Default loading image</h3>
18 |     <img ng-src="{{'https://dcb.co.il/angular-image-fallback/high-res.jpg'}}" loading-src height="300"/>
19 | </div>
20 | 
21 | <script>
22 |     angular.module('app', ['dcbImgFallback']);
23 | </script>
24 | </body>
25 | </html>


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "angular-img-fallback",
 3 |   "version": "0.2.0",
 4 |   "description": "Utility to work with loading images, has fallback-src to handle errors in image loading and loading-src for images loading placeholders.",
 5 |   "main": "angular.dcb-img-fallback.js",
 6 |   "scripts": {
 7 |     "build": "babel angular.dcb-img-fallback.js -o angular.dcb-img-fallback.min.js -s --no-comments && uglifyjs angular.dcb-img-fallback.min.js -c -m -o angular.dcb-img-fallback.min.js"
 8 |   },
 9 |   "repository": {
10 |     "type": "git",
11 |     "url": "git+https://github.com/dcohenb/angular-img-fallback.git"
12 |   },
13 |   "keywords": [
14 |     "angularjs"
15 |   ],
16 |   "author": "Daniel Cohen <dcohenb@gmail.com>",
17 |   "license": "MIT",
18 |   "bugs": {
19 |     "url": "https://github.com/dcohenb/angular-img-fallback/issues"
20 |   },
21 |   "homepage": "https://github.com/dcohenb/angular-img-fallback#readme",
22 |   "devDependencies": {
23 |     "babel-cli": "^6.10.1",
24 |     "babel-preset-es2015": "^6.9.0",
25 |     "uglify-js": "^2.6.4"
26 |   }
27 | }
28 | 


--------------------------------------------------------------------------------