I have 6 product names and images in the server that I am able to display in the UI. The UI looks good, but my requirement is to temporarily display the image (base64 string) in the respective placeholder.
<ul class="list">
<li class="item" ng-repeat="i in products track by $index" ui-sref="leadProduct" >
{{i}}
<br>
<br>
<img ng-show="base64Array[$index] != undefined" ng-src="{{'data:image/png;base64,'+base64Array[$index]+imgURI}}" ng-err-src="http://placehold.it/100x100" ng-click="takePicture($index)">
<img ng-show="base64Array[$index] == undefined" src="http://placehold.it/100x100" ng-click="takePicture($index)">
</li>
</ul>
This is how I am currently displaying the array, but below is my ng-cordova camera function:
$scope.takePicture = function() {
navigator.camera.getPicture(onSuccess, onFail, {
quality: 75,
targetWidth: 100,
targetHeight: 100,
destinationType: 0
});
function onSuccess(imageData) {
console.log('success');
$scope.imgURI = imageData;
$scope.$apply();
}
function onFail(message) {
alert('Failed because: ' + message);
}
};
I am able to invoke the camera function, but I am unable to view the image that I took from the camera.