Angular-tidy-img NPM

angular-tidy-img

A small AngularJS directive that makes working with images a breeze.

todo ~~example~~

tidy-img lets you pass in a "loader", which will be shown while your image is being loaded. It also lets you specify a fallback image url in case your image isn't found.

Install

Install with NPM npm install --save angular-tidy-img

Or, install with Bower bower install --save angular-tidy-img

Now, declare tidy-img as a dependency.

var app = angular.module( 'MyApp', [ 'rc.tidyImg' ] );

Usage

In your templates, apply the tidy-img directive as an element or an attribute

<tidy-img
    img-src="your/image/path/or/url.png"
    img-width="100px" 
    img-height="100px" 
    loader="<img src='my/preloader/spinner.gif'>" 
    fallbackSrc="fallback/image/in/case/of/error.png" 
></tidy-img>

API

Attribute	Info
imgSrc	string required - url or path to your desired image
imgWidth	string optional - dimensional unit, if you don't specify this, you'll want to add your own CSS styles or the image will not be the right size
imgHeight	string optional - dimensional unit, if you don't specify this, you'll want to add your own CSS styles or the image will not be the right size
loader	string optional - HTML markup (not an actual element reference), for example `<b class="loader">Loading...</b>`
fallbackSrc	string optional - url or path to fallback image in case we couldn't load the intended image

NOTE

You should apply your own styles to this directive.
All of the attributes accept interpolated variables.
If don't pass in a width or height, then your image container might now be visible since it has 0x0px dimensions.
Changes in your model will not have any effect yet, will get to this soon.

TODO