dcohenb / angular-img-fallback Goto Github PK

Hi,

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

Thanks.

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"
    }
}

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!

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

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? :)

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">

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

Do you need to bump a release?

taa

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

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....

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

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

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 ;)

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

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

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.

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.

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.

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

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

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)

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.

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 => {

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

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.

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 ?

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.