tlvince / angular-fallback-src

Fallback image source directive

angular-fallback-src

Fallback image source directive

Add an fb-src attribute to an <img>. If the image's ng-src does not exist, fb-src will be used instead.

Example:

<img
  ng-src="broken.png"
  fb-src="http://upload.wikimedia.org/wikipedia/en/b/bc/Wiki.png" />

fb-src can of type array of strings, in which case, each element will be used in turn until a request is successful.

Install

bower install angular-fallback-src

Usage

Add fallback.src as a module dependency, e.g.:

angular.module('App', ['fallback.src']);

Author

© 2014 Tom Vincent http://tlvince.com/contact

License

Released under the MIT License.

angular-fallback-src's Issues

Documentation needs change

fb-src takes an array.
It fails when I just give it a string while following the documentation.

it should be

fb-src="['a-dummy-url.jpg']"

Support array of images before fallback

Handle an array instead of ng-src which has a list of URLs.
The expected behaviour is to handle first valid image from the list of URLs. And if none, then fallback to fallbacks.

Right now I can do a workaround to handle this but that is not very intuitive.
The way to do this is to leave ng-src empty and add all images to fallback-list. Just need to add the real-fallback image to the end of this list.

Find an expressive way to do this.