angular-image-404

angular-image-404

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

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.

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.