angular-image-404 0,0 Bower gulp npm

AngualrJS directive use to shows a fallback image when img element get 404 or other errors.

2 years after

Bower version __npm version

angular-image-404

AngualrJS directive that shows a fallback image when img element can not show picture correct.

DEMO

Install

You can install this directive with npm:

npm install --save angular-image-404

Install with Bower:

bower install --save --allow-root angular-image-404

or just download it.

Usage

After install, you need to include the dist/angular-image-404.js in html like this:

<script type="text/javascript" src="./angular-image-404/dist/angular-image-404.js"></script>

And add directive module in dependience list:

var app = angular.module('app', ['angular-image-404']);

Now you can use it in html like this:

<img src="./notFound.jpg" image-404="./fallback.jpg" width=200 height=120>

And you can set the attribute image-404 as empty:

<img src="./notFound.jpg" image-404 width=200 height=120>

if image-404 set as empty, directive will get placeholder image from http://dummyimage.com, and you can set the fallback image with the following attribute:

  • fb-bgcolor: background color
  • fb-color: color of the text on the image
  • fb-text: text on the image

You can use width / height / max-width / max-height to set the size of the placeholder.

like this:

<img src="./notFound.jpg"
      image-404 
      fb-bgcolor="#C0392B" 
      fb-color="#C5EFF7" 
      fb-text="Not Found" 
      max-width=200 
      height=120>

Test & Release

If you want to run example, you should run npm i:

npm i

and run gulp with test task:

gulp test

BTW, gulp release will create release js file in ./dist folder.

Related Repositories

holder

holder

:city_sunrise: Client-side image placeholders. ...

ng-flow

ng-flow

Flow.js html5 file upload extension on angular.js framework ...

ultimate-seed

ultimate-seed

{MEAN Stack on Steroids} The ultimate full-stack AngularJS + Node.js/Express see ...

osharp-ns20

osharp-ns20

osharp framework with .NETStandard2.0 ...

ng-classify

ng-classify

Convert CoffeeScript classes to AngularJS modules ...


Top Contributors

stiekel

Dependencies

package version
dev gulp ^3.9.0
gulp-jade ^1.1.0
gulp-rename ^1.2.2
gulp-uglify ^1.5.1
gulp-webserver ^0.9.1
gulp-concat ^2.6.0
angular ^1.4.8

Releases

-   0.1.6 zip tar
-   0.1.5 zip tar
-   0.1.4 zip tar
-   0.1.3 zip tar
-   0.1.2 zip tar
-   0.1.1 zip tar
-   0.1.0 zip tar