dcohenb / angular-img-fallback Goto Github PK
View Code? Open in Web Editor NEWUtility to work with loading images, has fallback-src to handle erros in image loading and loading-src for images loading placeholders
License: MIT License
Utility to work with loading images, has fallback-src to handle erros in image loading and loading-src for images loading placeholders
License: MIT License
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 ?
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.
Create bower repo for this so that it can be easily imported into projects
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
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.
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">
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.
When an error occurs to the fallback too -- an infinite loop of loading the image occurs. Please check this.
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 => {
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"
}
}
Could you please not minify your scripts? Most of us do this in our projects build phase ourselves ;)
version is ionic 1.7.10
but is not wokr?
can you help me ?
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.
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)
Hi,
Did I need to put the relative or absolute path of an image ?
Thanks.
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? :)
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 ;)
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!
I'd like that, so I could use fontawesome.
Hi, when I install from bower, this commit is not included (breaking bower installation)
Do you need to bump a release?
taa
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.
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.
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.