Hi,
i’ve a problem with android 4.4.4. I can’t see any of my ng-src="{{ externalUrlLink }}" images.
For every images that i try to load i see the img fallback icon.
Seems like a cordova-KitKat problem.
Works fine on 4.4.3 and minor!
Can someone help me out?
Have you used chrome to inspect the network request? That should give you an idea of the URL that it is requesting.
We don’t have any issues with loading images in Android 4.0 and up.
i did inspect and my urls are fine
but they didn’t show up on the device,
i still see the fallback icon.
In the console i got this error for every url
Failed to load resource: net::ERR_CONNECTION_REFUSED
Seems like CORS are disabled, because even adMob doesn’t work.
Android 4.4.3 and minor work fine!
This is only for Android 4.4.4 (tested on two nexus 5)
Here’s one url:
// https://s3-eu-west-1.amazonaws.com/dev-marco-andrea-dev/eb52cd460d2a1bd60770a286ee8de00d.png
Hey How do you implement the fallback icon? I am using external links to my images. But have not tested on 4.4.4 yet! Can you let me know more about this?
the “fallback” icon is just the icon that the browser put on when he can’t load an image.
Right now i’ve just updated all the things i can update (cordova, android sdk, ionic) but the problem is still present. 
Ok! I have not tested in 4.4.4 yet.
can you try this in your code?
<img ng-src="http://www.imagemagick.org/Usage/thumbnails/thumbnail.gif">
What do you get?
If it truly is a CORS issue, you can whitelist the s3 domain in the config.xml:
http://docs.phonegap.com/en/3.5.0/guide_appdev_whitelist_index.md.html#Whitelist%20Guide
So Sid, you’re image load fine.
The problem is with S3 or… i don’t know… because even this plugin
https://github.com/floatinghotpot/cordova-admob-pro do not work with 4.4.4
but all is playing fine with 4.4.3
ionic put this by default
<access origin="*" />Yeah, they have. Try explicitly adding the domain name from which you are obtaining images as the value to origin. Then tell me how it goes. I am waiting.
did! Nothing good happend. Maybe the problem is server-side
Ok do this.
<img ng-src="http://www.imagemagick.org/Usage/thumbnails/thumbnail.gif">. Now see if the image gets rendered in your mobile device (Android 4.4.4)
Did you try this? Let me know soon.
i did that before. You’re image loads fine
Thank god! :):):):):):):):):):):):)
You had almost killed me with you question title ‘Android 4.4.4 - URL image render problem’. I will try and have a look at your problem also.
And again, are you sure <img ng-src="http://www.imagemagick.org/Usage/thumbnails/thumbnail.gif"> rendered without any problem on your android 4.4.4 phone?
I am also having image rendering problems. In my case, it is using a div with a background-image property set to a local device filesystem URL. I know the URLs are correct and this is only a problem in Android 4.4.4. Rendering is fine in 4.4.2.
<div style="background-image: url('{{thumbPath}}');" class="bundleImg">
Furthermore, when I use the Chrome remote debugging tools, I can get the image to appear by editing the URL and adding a space to the URL at the end. Or any other change that keeps the URL intact but registers a refresh. I know this is not a $scope.$apply() problem as the image remains invisible upon taps, clicks, and other interactions with the model that causes a digest cycle.
Moreover, the problem is intermittent (though happening more often than not). I believe, also related, is a problem I’m having with an array not properly updating after a slice() in Android 4.4.4 (works on 4.4.2 and iOS).
Thanks,
Marc
Any news here on this problem? I am still having this issue and can’t get to the bottom of it.
One factor that I think might be affecting me is that I am saving these images (thumbnails) to disk but updating the model’s path prior to the file actually being saved. However, there is a $scope.$apply() after all files have been saved so it should update the model properly. Also, this is only a problem in 4.4.4.
One thing I notice is that in the Resource inspector I can see that some of the images load and some don’t, and the ones that don’t are not in memory. When updating the link (by adding a space), they suddenly load in the Resources panel.
Any thoughts? Don’t know how I can post a small example here, there is a lot of code to dig through.
Marc
Hey Marc
So I’m not sure what could be causing this. Maybe try adding the background images through a directive.
.directive('backImg', function(){
return function(scope, element, attrs){
var url = attrs.backImg;
var content = element;
content.css({
'background-image': 'url(' + url +')',
'background-size' : 'cover'
});
};
})
Gave it a shot, no dice. Same result.
I take that back. Not quite the same result. The directive causes the url to fail, for some reason. The inspector shows:
background-image: url(file:///android_asset/www/undefined);
I am getting the feeling that this might have something to do with the fact that these images are being rendered in an ion-footer. I am rendering the same exact images in a slide (later in the slide box) and those render fine. Here is my HTML markup. (Sorry, it’s a little messy.)
<ion-view title="TAG,">
<ion-nav-buttons side="right">
<button class="button no-animation button-icon icon ion-ios7-gear" style="-webkit-user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); float: left;" ng-click="gotoSettings()">
</button>
<button class="button no-animation button-icon icon ion-ios7-paperplane" style="-webkit-user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);" ng-click="sendFeedback()">
</button>
</ion-nav-buttons>
<ion-content scroll="false" has-header="true">
<ion-slide-box loop="false" auto-play="false" ng-if="readyToShow" on-slide-changed="tagSlideChanged($index)" selected="activeTagSlide">
<ion-slide-pager></ion-slide-pager>
<ion-slide class="hasPager">
<ion-content>
<div>
<div class="tagLabel" ng-repeat="tag in templates.categories track by $index" on-tap="clickTag()" on-hold="tagMenu($index, tag)" style="{{tag.checked | myTagStyle}}" >
<p>{{tag.name}}<span ng-show="!tag.active">*</span></p>
</div>
<form ng-submit="addTag(newTagText)">
<div style="border-left: none; border-top: none; border-bottom: none; border-right: 40px solid #f8f8f8">
<input type="text" id="inputText" ng-model="newTagText" placeholder="new tag category...">
</div>
</form>
<br/>
<br/>
<br/>
<br/>
</div>
</ion-content>
</ion-slide>
<ion-slide class="hasPager">
<ion-content>
<div>
<div ng-repeat="tag in templates.categories track by $index" ng-show="tag.checked">
<div class="tagLabel" ng-show="tag.active" on-tap="clickTag()" on-hold="tagMenu($index, tag)" style="{{tag.checked | myTagStyle}}">
<p>{{tag.name}}<span ng-show="!tag.active">*</span></p>
</div>
<div class="tagLabel" on-tap="clickSubTag($parent)" on-hold="subTagMenu($index, item)" ng-repeat="item in tag.items track by $index" style="{{item.checked | myTagletStyle}}" >
<p><span style='display:inline-block;'> </span>{{item.name}}<span ng-show="!item.active">*</span></p>
</div>
<form ng-submit="addSubTag()">
<div>
<input type="text" class="subtagTextInput" id="inputText" placeholder="new {{tag.name}} taglet..." ng-model="inputText">
</div>
</form>
<br/>
</div>
</div>
<br/>
<br/>
<br/>
<br/>
</ion-content>
</ion-slide>
<ion-slide class="hasPager">
<ion-content>
<div class="bundleHeader">
<h2 style="color: #888">{{currentBundle.attributes.timestamp | timeReadable}}</h2>
<h3 style="color: #888">{{currentBundle.tagString}}</h3>
</div>
<div ng-repeat="thumbPath in mediaCollection.thumbPaths" class="bundleDiv">
<div style="background-image: url('{{thumbPath}}');" class="bundleImg">
<!-- <div bg-img="{{thumbPath}}" class="bundleImg"> -->
</div>
</div>
</ion-slide>
</ion-content>
</ion-slide-box>
<ion-footer-bar class="bar bar-subfooter previewFooter" >
<div>
<div ng-repeat="filepath in mediaCollection.thumbPaths">
<div on-tap="viewBundle()" style="background-image: url('{{filepath}}');" class="footerImg" on-hold="tagPreview()">
</div>
</div>
</div>
</ion-footer-bar>
</ion-content>
</ion-view>