dcohenb / angular-img-fallback

Utility to work with loading images, has fallback-src to handle erros in image loading and loading-src for images loading placeholders

Angular Image Fallback

Angular directives that handles image loading, it has fallback-src to handle errors in image loading and loading-src for placeholder while the image is being loaded.

Bower Download

bower install angular-img-fallback

Installation

1. Download and import the plugin script.
   <script src="lib/angular-img-fallback/angular.dcb-img-fallback.min.js"></script>
2. Add dcbImgFallback to your angular app module dependencies list.
   angular.module('myAngularApp', ['dcbImgFallback']);
3. Add the fallback-src attribute to your img
   <img ng-src="{{'path/to/img.jpg'}}" fallback-src />

Usage

Just add the fallback-src and the loading-src attributes to your <img /> tags
<img ng-src="{{'path/to/img.jpg'}}" fallback-src loading-src />
Make sure you use ng-src as your image src attribute.

Advanced options

• Simple usage, will replace to a default missing image placeholder
  <img ng-src="{{'path/to/img.jpg'}}" fallback-src />

• Custom fallback, will replace to your own custom missing image
  <img ng-src="{{'path/to/img.jpg'}}" fallback-src="{{'path/to/fallback.jpg'}}" />

• Loading placeholder, show a loading placeholder until image loads
  <img ng-src="{{'path/to/img.jpg'}}" loading-src />

• Custom Loading placeholder, show a custom image loading placeholder until image loads
  <img ng-src="{{'path/to/img.jpg'}}" loading-src="{{'path/to/loading.jpg'}}" />

• Or both! loading placeholder and a fallback source can work together
  <img ng-src="{{'path/to/img.jpg'}}" loading-src fallback-src />

Icons license

Icons are provided from http://icomoon.io/ under the GNU General Public License v3.0
http://www.gnu.org/licenses/gpl.html

Contributing

We use Babel to compile the es6 code to es5 and uglify-js to minify the code even more. it's already setup, all you need to do is install dependencies using $ npm install and run $ npm run build.

angular-img-fallback's Issues

Does the latest commit need a new release?

Hi, when I install from bower, this commit is not included (breaking bower installation)

Do you need to bump a release?

taa

Update bower file

A couple months ago a PR I made was merged to the main branch. However, a new bower version was not released so users are still downloading an outdated version. Bumping up the version should fix issues like #23 and #21

Create bower repo

Create bower repo for this so that it can be easily imported into projects

fallback-src not work

version is ionic 1.7.10
but is not wokr?
can you help me ?

loading-src issue

loading-src is not working for me. Please check the following code.

this code is working fine if i use the follwoing urls.

ng-src="{{'http://localhost/hard/skins/admin/v1/en/assets/admin/layout/img/logo -big.png'}}

fallback-src="{{'http://localhost/hard//files/gallery

But when i added loading-src, The loading image is showing not the actual image.
ng-src="{{'http://localhost/hard/skins/admin/v1/en/assets/admin/layout/img/logo -big.png'}}"
fallback-src="{{'http://localhost/hard//files/gallery/971665_463123040436877_1595151406_n.jpg'}}"
loading-src=''

it is always showing me the loading image. what is the issue ?

Flash occurs when loadingSrc and fallbackSrc are the same image

When you specify the same image for loadingSrc and fallbackSrc. A brief flash occurs as the image transitions to the fallbackSrc. It would be desirable to not have a brief flash to the user.

<img ng-src="<path that will error>" loading-src="assets/images/placeholder.png"  fallback-src="assets/images/placeholder.png">

When the browser tries to re fetch the image for the second time, fallback-src dont work any more

Hi, there.

I'm using md-autocomplete fro the material spec, and when you scroll and the item enter the visible part of the view, for some reason the browser tries to fetch the src image, and since the plugin unregisters from the error event, it no longer works

You'll see it in line 15:

element.off('error', errorHanlder);

If you want to, I can try to make a pull request

thanks!

Won't load a dynamic image

So I've noticed an interesting little bug...

works fine

will not work at all, it renders the following error: "net::ERR_TOO_MANY_REDIRECTS"

so basically this is only a useful plug-in if we're dealing w/ static content - not if we're dealing with dynamic content....

specifying loading-src always loads fallback image !

If i do this :-

<img ng-src="{{data.resimage}}" fallback-src="img/default{{ imageNo }}.jpg" alt="" />

Works great

As soon as i add loading-src like dis :-

<img ng-src="{{data.resimage}}" loading-src fallback-src="img/default{{ imageNo }}.jpg" alt="" />

IT WILL ALWAYS LOAD FALLBACK

I even tried this :-

<img ng-src="{{data.resimage}}" loading-src="img/default{{ imageNo }}.jpg" fallback-src="img/default{{ imageNo }}.jpg" alt="" />

Help is appreciated ! Thanks.

remove base-64 code

It is huge, make the loadingDefault and missingDefault configurable with a provider instead.

with base-64
angular.dcb-img-fallback.js (25,8kb)

without base-64
angular.dcb-img-fallback.js (1,8kb)

Bad bower.json

In the bower file

"main": "angular-img-fallback.min.js"

real filename is "angular.dcb-img-fallback.min.js"

So when using wiredep the js file doesn't exists.

Thanks for this lib ;)

Fallback image should replace loading image if regular image isn't found

Currently if you use both fallback-src and loading-src attributes, and the image inside ng-src is not found it doesn't replace the image with the fallback but stays on the loading image forever.

DEMO: https://plnkr.co/edit/2XSskxatdpVfHwvrdnnN?p=preview

minified distro

Could you please not minify your scripts? Most of us do this in our projects build phase ourselves ;)

Fallback-src doesn't set the fallback image if the src is empty

When the binding value for ng-src is null, src is not set and the fallback img is not set. This happens when loading the url from database and the url is not set for example.

$scope.someUrl = null;
...
<img ng-src='{{someUrl}}' fallback-src />

The fallback-src could check for the 'src' attribute and run the fallback handler if no src is set.

Infinite looping of image loading

When an error occurs to the fallback too -- an infinite loop of loading the image occurs. Please check this.

ENORESTARGET No tag found that was able to satisfy ~0.0.2

Hi,

Just following the install instructions, I get this error:

$ bower install angular-img-fallback
bower angular-img-fallback#~0.0.2 not-cached git://github.com/dcohenb/angular-img-fallback.git#~0.0.2
bower angular-img-fallback#~0.0.2 resolve git://github.com/dcohenb/angular-img-fallback.git#~0.0.2
bower angular-img-fallback#* cached git://github.com/dcohenb/angular-img-fallback.git#4389fb7429
bower angular-img-fallback#* validate 4389fb7 against git://github.com/dcohenb/angular-img-fallback.git#*
bower angular-img-fallback#~0.0.2 ENORESTARGET No tag found that was able to satisfy ~0.0.2

Additional error details:
No versions found in git://github.com/dcohenb/angular-img-fallback.git

Is there a workaround?

Thanks.

main property in bower manifest should point to runnable code

We use main-bower-files with gulp to inject our dependencies into our application and just suffered an outage because the main property in angular-img-fallback's bower points to ES6 code. I'd suggest pointing it towards the transpiled minified version instead.

Until this fix is deployed, the workaround is adding the following to your applications bower file:

"overrides": {
    "angular-img-fallback": {
      "main": "angular.dcb-img-fallback.min.js"
    }
}

Error when building with grunt-uglify

I'm using yeoman angular generator, and when I try to build my project I get the following error:

Uglifying source .tmp/concat/scripts/vendor.js failed.
Warning: Uglification failed.
SyntaxError: Unexpected token: operator (>).

This line refers to this one:
.directive('fallbackSrc', ['imageService', imageService => {

Loading-src and fallback doesn't seem to coexist well

This is the code I'm using:
<img ng-src="{{:: getImage(file,'original')}}" loading-src fallback-src="{{getImage(file, 'default')}}" />

Where the function getImage either returns the original url or a predefined default provided image. If I use it without the loading-src, the fallback generates, however if I use it together, the loading-src will stay indefinitely.

This is what renders in the dom after page load.

<img ng-src="{{:: getImage(file,'original')}}" loading-src="" fallback-src="images/default-video-small.png" src="data:image/jpeg;base64,/9j/xxxxxxxx">

As you can see, the fallback-src already executed but the src is still the base64 default image.

Second part to the question is, is there a way to target the time it takes to listen for a response back from the original src? I've found some fallback-src takes 5-10 seconds to trigger after everything else is loaded in in an ng-repeat.

Relative or absolute ?

Hi,

Did I need to put the relative or absolute path of an image ?

Thanks.

Loading and Fallback doesn't work properly together

Hi,

I am using the img tag as -

<img class="avatar" height="40" ng-src="{{ user.picture }}" fallback-src="images/no-profile-image.jpg" loading-src="images/img-loading.gif" />

However, when the image is not present on the server, it shows the loading image forever instead of showing the fallback image. i.e if original image resulted in 404 error, then it should fallback to fallback-src, however it just keep showing the loading src.

Bower install has incorrect main js name in bower.json

I tried adding this widget into my Yeoman angular based toolchain.

However the filename in the bower.json for angular-img-fallback is incorrect as it references a file
angular.dcb-img-fallback.min.js

but the script in the distribution is actually
angular-img-fallback.min.js

Add npm package

Our project is trying to remove bower as a dependency and use npm for all our client-side dependencies. Could you publish this package on npm please? :)

Support for custom classes on error

I'd like that, so I could use fontawesome.

Directive loadingSrc stop listen changes in the parameter passed to ngSrc

One of the first things the directive loadingSrc does is remove the attribute ngSrc to take over of the image load process. The problem is that after the loading process ends the changes in the value passed to the ngSrc directive are no longer watched.