My app downloads images from an external resource to the data directory using FileTrasnfer. Now, in one of the pages of my app I’m supposed to display those images. The paths I used for the images is the exact path they were downloaded to, then I don’t understand why the images are not displayed, seems like there is no access to the file How can I access files in the file.datadirectory?
getfileimage() {
const fileTransfer: FileTransferObject = this.transfer.create();
let options ={
headers:{
'token': this.token,
'sid': this.sid,
'user': this.user,
'type': "image",
'file': this.FileName
}
}
fileTransfer.download(this.apiUrl, this.file.dataDirectory + 'photo.jpg', true, options)
.then(result => {
console.log("getfileimage 2 :- " + JSON.stringify((result)));
console.log("Response data ->>>>>>> :- " + JSON.stringify(result.nativeURL));
// this.imageDis = normalizeURL(JSON.stringify(result.nativeURL));
this.imageDis = JSON.stringify(result.nativeURL);
//console.log("getfileimage :- " +this.imageDis);
}, (err) => {
console.log("Error is: " + JSON.stringify(err));
});
output :----- getfileimage :- “file:///var/mobile/Containers/Data/Application/E806FDE7-1AF2-4DA2-BC07-E5FEC2E422ED/Library/NoCloud/photo.jpg” 2018-02-26 17:28:11.911819+0530 MyApp[607:174952] THREAD WARNING: [‘File’] took ‘10.540039’ ms. Plugin should use a background thread. 2018-02-26 17:28:11.936391+0530 MyApp[607:174952] WARNING: sanitizing unsafe URL value “file:///var/mobile/Containers/Data/Application/E806FDE7-1AF2-4DA2-BC07-E5FEC2E422ED/Library/NoCloud/photo.jpg” (see http://g.co/ng/security#xss) 2018-02-26 17:28:11.970340+0530 MyApp[607:174952] localFile :- cdvfile://localhost/library-nosync/photo.jpg