├── .gitignore ├── examples ├── placeholder.png ├── app.js └── index.html ├── dist ├── angular-fallback-image.min.js └── angular-fallback-image.js ├── gulpfile.js ├── bower.json ├── src └── angular-fallback-image.js ├── package.json ├── README.md └── LICENSE /.gitignore: -------------------------------------------------------------------------------- 1 | bower_components/ 2 | node_modules/ -------------------------------------------------------------------------------- /examples/placeholder.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sebasrodriguez/angular-fallback-image/HEAD/examples/placeholder.png -------------------------------------------------------------------------------- /examples/app.js: -------------------------------------------------------------------------------- 1 | (function(){ 2 | angular.module('fallback-app', [ 3 | 'angular-fallback-image' 4 | ]).controller('ExampleController', [function() { 5 | this.Placeholder = 'placeholder.png'; 6 | this.Image = 'nonExistent.png'; 7 | }]); 8 | })(); -------------------------------------------------------------------------------- /dist/angular-fallback-image.min.js: -------------------------------------------------------------------------------- 1 | !function(){angular.module("angular-fallback-image",[]).directive("srFallback",function(){return{restrict:"A",link:function(a,r,t){var l,e,c=r,i=t;r.on("error",function(){if(c.attr("src")===i.srFallback)throw new Error("The supplied fallback image doesn't exist");i.srFallback||(l=c[0].offsetWidth,e=c[0].offsetHeight,i.srFallback="http://placehold.it/"+l+"x"+e),c.attr("src",i.srFallback)})}}})}(); -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | var gulp = require("gulp"); 2 | var uglify = require("gulp-uglify"); 3 | var rename = require("gulp-rename"); 4 | 5 | gulp.task("optimize", function() { 6 | return gulp.src("src/angular-fallback-image.js") 7 | .pipe(uglify()) 8 | .pipe(rename({ 9 | extname: ".min.js" 10 | })) 11 | .pipe(gulp.dest("dist")); 12 | }); 13 | 14 | gulp.task("copy", function() { 15 | return gulp.src("src/angular-fallback-image.js") 16 | .pipe(gulp.dest("dist/")); 17 | }); 18 | 19 | gulp.task("build", ["optimize", "copy"]); -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "angular-fallback-image", 3 | "version": "1.2.0", 4 | "main": ["src/angular-fallback-image.js"], 5 | "authors": [ 6 | "Sebastian Rodriguez " 7 | ], 8 | "description": "Angular directive that shows a fallback image when an image returns 404", 9 | "keywords": [ 10 | "angular", 11 | "directive", 12 | "image", 13 | "fallback" 14 | ], 15 | "license": "MIT", 16 | "ignore": [ 17 | "**/.*", 18 | "node_modules", 19 | "bower_components", 20 | "test", 21 | "tests", 22 | "examples" 23 | ], 24 | "dependencies": { 25 | "angular": "^1.2.0" 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /examples/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | angular-fallback-image 6 | 7 | 8 | 9 | 10 | 11 | 12 |

13 |

angular-fallback-image

14 | 15 |

default fallback image

16 | 17 |

18 | 19 | 20 | -------------------------------------------------------------------------------- /dist/angular-fallback-image.js: -------------------------------------------------------------------------------- 1 | (function(){ 2 | angular.module('angular-fallback-image', []).directive('srFallback', function(){ 3 | return { 4 | restrict: 'A', 5 | link: function($scope, element, attributes) { 6 | var elem = element; 7 | var attrs = attributes; 8 | var width, height; 9 | 10 | element.on('error', function() { 11 | if(elem.attr('src') === attrs.srFallback) { 12 | throw new Error('The supplied fallback image doesn\'t exist'); 13 | } 14 | if(!attrs.srFallback) { 15 | width = elem[0].offsetWidth; 16 | height = elem[0].offsetHeight; 17 | attrs.srFallback = 'http://placehold.it/' + width + 'x' + height; 18 | } 19 | elem.attr('src', attrs.srFallback); 20 | }); 21 | } 22 | }; 23 | }); 24 | })(); -------------------------------------------------------------------------------- /src/angular-fallback-image.js: -------------------------------------------------------------------------------- 1 | (function(){ 2 | angular.module('angular-fallback-image', []).directive('srFallback', function(){ 3 | return { 4 | restrict: 'A', 5 | link: function($scope, element, attributes) { 6 | var elem = element; 7 | var attrs = attributes; 8 | var width, height; 9 | 10 | element.on('error', function() { 11 | if(elem.attr('src') === attrs.srFallback) { 12 | throw new Error('The supplied fallback image doesn\'t exist'); 13 | } 14 | if(!attrs.srFallback) { 15 | width = elem[0].offsetWidth; 16 | height = elem[0].offsetHeight; 17 | attrs.srFallback = 'http://placehold.it/' + width + 'x' + height; 18 | } 19 | elem.attr('src', attrs.srFallback); 20 | }); 21 | } 22 | }; 23 | }); 24 | })(); -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "angular-fallback-image", 3 | "version": "1.2.0", 4 | "description": "Angular directive that shows a fallback image when an image returns 404", 5 | "main": "dist/angular-fallback-image.js", 6 | "directories": { 7 | "example": "examples" 8 | }, 9 | "scripts": { 10 | "test": "echo \"Error: no test specified\" && exit 1" 11 | }, 12 | "repository": { 13 | "type": "git", 14 | "url": "https://github.com/sebasrodriguez/angular-fallback-image.git" 15 | }, 16 | "keywords": [ 17 | "angular", 18 | "directive", 19 | "image", 20 | "fallback" 21 | ], 22 | "dependencies": { 23 | "angular": "^1.2.0" 24 | }, 25 | "author": "Sebastian Rodriguez ", 26 | "license": "MIT", 27 | "bugs": { 28 | "url": "https://github.com/sebasrodriguez/angular-fallback-image/issues" 29 | }, 30 | "homepage": "https://github.com/sebasrodriguez/angular-fallback-image", 31 | "devDependencies": { 32 | "gulp": "^3.9.0", 33 | "gulp-rename": "^1.2.2", 34 | "gulp-uglify": "^1.4.2" 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | [![Bower version](https://badge.fury.io/bo/angular-fallback-image.svg)](http://badge.fury.io/bo/angular-fallback-image) 2 | [![npm version](https://badge.fury.io/js/angular-fallback-image.svg)](http://badge.fury.io/js/angular-fallback-image) 3 | 4 | # angular-fallback-image 5 | Angular directive that shows a fallback image when an image returns 404 6 | 7 | ## How to use it 8 | 9 | You must include the angular-fallback-image dependency on your angular module: 10 | ```javascript 11 | var app = angular.module("exampleApp", ["angular-fallback-image"]); 12 | ``` 13 | 14 | Then on your html you simply use it like this: 15 | ```html 16 | 17 | ``` 18 | 19 | Angular expressions can also be added to the sr-fallback attribute. 20 | 21 | If you do not want to set your custom fallback image, you can use default, angular-fallback-image will get a image from [placeholder.it](https://placehold.it/): 22 | ```html 23 | 24 | ``` 25 | 26 | If you do not set width or height of `img`, angular-fallback-image will get the element width and height. -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2015 Sebastián Rodríguez 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, 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, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | 23 | --------------------------------------------------------------------------------