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.