Hi all,
I ran into a problem where I am unable to get the image to load on the android emulator. The thing is that I am using a Parse database. I stored my images on the Parse database and retrieved the images using Parse API. The image cannot be displayed on the android emulator.
But when I hardcoded the image file path on my ionic app, it is able to show on the android emulator. The emulator I used is Genymotion.
What should I do in order to get the image to load on the android emulator?
Below is the code I used
quote.html
<ion-view view-title="Images">
<ion-content ng-controller="QuotesCtrl">
<ion-slide-box show-pager="false" on-slide-changed="slideHasChanged($index)" active-slide="selectedSlide">
<ion-slide ng-repeat="quote in quotes track by $index">
<div class="list card">
<div class="item item-image">
<!--<div class="item item-body">-->
<img class="full-image" ng-src="{{quote.localfile}}"></img>
</div>
<div class="item tabs tabs-secondary tabs-icon-left">
<a class="tab-item" ng-click="favourite($index)">
<i ng-class="{'icon ion-ios7-heart': liked, 'icon ion-ios7-heart-outline': !liked}"></i>
</a>
<a class="tab-item" ng-click="download($index,false)">
<i class="icon ion-android-download"></i>
</a>
<!--<a class="tab-item" ng-click="share(card.quote.image)">-->
<a class="tab-item" ng-click="share($index)">
<i class="icon ion-share"></i>
</a>
</div>
</div>
</ion-slide>
</ion-slide-box>
</ion-content>
</ion-view>
controller.js
.controller ('QuotesCtrl', function ($scope, $timeout,$ionicLoading,$ionicActionSheet,$ionicSlideBoxDelegate, QuotesService, FavouriteService, TAG){
console.log('QuotesCtrl');
/*
* I am able to get the image to load on the Genymotion Android Emulator.
*/
var cardTypes = [
{'localfile':'http://files.parsetfss.com/c4dfdf59-10ec-454d-9445-d27657f2494c/tfss-d0e3618c-5cc7-4aac-8473-6e9c887a0962-a21e7839bf52497d0755094af138483fe054ec86.jpg'},
{'localfile':'http://files.parsetfss.com/c4dfdf59-10ec-454d-9445-d27657f2494c/tfss-1d3330e6-1a02-4b13-b86e-5d2b670d5bc9-2004289e7acf68452aa69c9b963ed05a02a2355e.jpg'},
{'localfile':'http://files.parsetfss.com/c4dfdf59-10ec-454d-9445-d27657f2494c/tfss-ec14a59c-3be4-4c27-9478-f874cbd9fca6-ba88a50faed4506a22069f09a78ddffac174b3d4.jpg'}
];
$scope.quotes=cardTypes;
$scope.selectedSlide = 0; // initial
/*
* I am unable to get the image to load on the Genymotion Android Emulator.
*/
/*$ionicLoading.show({
template: '<i class="icon ion-loading-c"></i>Loading...',
duration: 5000
});
QuotesService.all().then(function(results, quotes){
$timeout(function() {
console.log ("["+TAG+"] Promise results size is "+results.length+".");
//console.log ("["+TAG+"] Quotes is "+JSON.stringify(quotes)+".");
$scope.quotes=quotes;
//$scope.liked = checkLiked ($scope.selectedSlide);
},3000);
$ionicLoading.hide();
});*/
});
services.js
.factory('QuotesService', function(LIMIT, TAG) {
return {
all: function () {
console.log("["+TAG+"] Inside Quotes.all.");
return this.getQuotes(0);
},
getQuotes: function (pageNumber) {
console.log ("["+TAG+"] Inside Quotes.getQuotes.");
var startDate = this.getDate(-1);
var quotes=[];
console.log ("["+TAG+"] the page number is "+pageNumber+".");
var quoteObj = Parse.Object.extend ("Quote");
var query = new Parse.Query (quoteObj);
query.greaterThanOrEqualTo("updatedTime",parseInt(startDate/1000));
query.descending ("updatedTime");
query.limit(LIMIT);
query.skip(pageNumber*LIMIT);
return query.find({
success:function (results) {
console.log ("["+TAG+"] The size of the returned result is "+results.length+".");
if (results.length>0) {
for (var i=0;i<results.length;i++) {
var quote = results[i];
quotes.push({'objectId':quote.id,'localfile':quote.get('localfile')});
}
}
},
error:function(error) {
console.log("["+TAG+"] An error has occurred.");
}
})
.then(
function(results){
return Parse.Promise.as (results,quotes);
},
function(error){
return Parse.Promise.error(error);
});
}
})
