I am building an app using Ionic and use cordova file transfer
plugin. Here my code to download image file from remote location. This
works file.
$ionicPlatform.ready(function(){
options = {};
url = "http://view.ionic.io/phones.png";
var targetPath = cordova.file.dataDirectory + "a.jpg";
var trustHosts = true;
$cordovaFileTransfer.download(url, targetPath, options, trustHosts)
.then(function(entry) {
value = angular.toJson(entry.nativeURL);
$scope.imgFile = entry.toURL();
console.log($scope.imgFile);
$scope.i2 = entry.toInternalURL();
console.log($scope.i2);
}, function(err) {
// Error
console.log("error");
}, function (progress) {
$timeout(function () {
$scope.downloadProgress = (progress.loaded / progress.total) * 100;
})
});
});
My first console.log give me local downloaded image path which is:
file:///Users/pratik/Library/Developer/CoreSimulator/Devices/2F1CF925-E0FC-4122-9FE7-7AFA6E5AABAD/data/Containers/Data/Application/DBE0933F-E62C-410B-81DF-20B941432E8F/Library/NoCloud/a.jpg
Second console.log give me following url : cdvfile://localhost/library-nosync/a.jpg
I checked my first url in browser and it display downloaded image.
My problem is I none of these urls are display image in view. Here my code in view to display image:
{{downloadProgress}}
<img ng-src="/a.jpg">
<img ng-src="{{i1}}">
<img ng-src="{{i2}}">
Can you please point me what i am doing wrong?