Ionic v2 Download and display Image - ionic-framework

Question

I am trying to develop an application where I have to download and display an image from a website. THis is the code snippet which I have used:-
LoadImage(){
const transfer = new Transfer();
var url = "http://demo.observerjobs.lk/storage/public/uploads/vacancies/"+this.hash+"/"+this.attachment;
var uri = encodeURI(url);
var filepath = cordova.file.cacheDirectory+ '/' + this.vacancy.attachment;//("/"+this.vacancy.attachment);
transfer.download(uri, filepath, true ).then((entry) => {
console.log('download complete: ' + entry );
this.image = "<ion-img src= '"+ entry.toURL() + "'/>";
console.log(this.image);
}).catch(error => {
console.log(JSON.stringify(error));
});
}
I create the img tag in the following format:-
"<ion-img src= 'file:///data/user/0/package_name/cache/suo-01-29-012588-12x3-kbd.jpg'/>"
However, I am unable to retrieve this file to be displayed. What Have I done wrong, and what can I do to remedy this?
Edit:- Here is the config.xml
<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<widget id="OBSCURED FOR IDENTITY" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
<name>OBSCURED</name>
<description>An awesome Ionic/Cordova app.</description>
<author email="hi#ionicframework" href="http://ionicframework.com/">Ionic Framework Team</author>
<content src="index.html"/>
<access origin="*"/>
<allow-intent href="http://*/*"/>
<allow-intent href="https://*/*"/>
<allow-intent href="tel:*"/>
<allow-intent href="sms:*"/>
<allow-intent href="mailto:*"/>
<allow-intent href="geo:*"/>
<platform name="android">
<allow-intent href="market:*"/>
<icon src="resources\android\icon\drawable-ldpi-icon.png" density="ldpi"/>
<icon src="resources\android\icon\drawable-mdpi-icon.png" density="mdpi"/>
<icon src="resources\android\icon\drawable-hdpi-icon.png" density="hdpi"/>
<icon src="resources\android\icon\drawable-xhdpi-icon.png" density="xhdpi"/>
<icon src="resources\android\icon\drawable-xxhdpi-icon.png" density="xxhdpi"/>
<icon src="resources\android\icon\drawable-xxxhdpi-icon.png" density="xxxhdpi"/>
<splash src="resources\android\splash\drawable-land-ldpi-screen.png" density="land-ldpi"/>
<splash src="resources\android\splash\drawable-land-mdpi-screen.png" density="land-mdpi"/>
<splash src="resources\android\splash\drawable-land-hdpi-screen.png" density="land-hdpi"/>
<splash src="resources\android\splash\drawable-port-ldpi-screen.png" density="port-ldpi"/>
<splash src="resources\android\splash\drawable-port-mdpi-screen.png" density="port-mdpi"/>
<splash src="resources\android\splash\drawable-port-hdpi-screen.png" density="port-hdpi"/>
</platform>
<platform name="ios">
<allow-intent href="itms:*"/>
<allow-intent href="itms-apps:*"/>
</platform>
<platform name="windows">
<preference name="windows-target-version" value="10.0"/>
</platform>
<preference name="webviewbounce" value="false"/>
<preference name="UIWebViewBounce" value="false"/>
<preference name="DisallowOverscroll" value="true"/>
<preference name="android-minSdkVersion" value="16"/>
<preference name="BackupWebStorage" value="none"/>
<preference name="SplashMaintainAspectRatio" value="true"/>
<preference name="FadeSplashScreenDuration" value="300"/>
<preference name="SplashScreen" value="screen"/>
<preference name="SplashScreenDelay" value="3000"/>
<feature name="StatusBar">
<param name="ios-package" onload="true" value="CDVStatusBar"/>
</feature>
<plugin name="ionic-plugin-keyboard" spec="~2.2.1"/>
<plugin name="cordova-plugin-whitelist" spec="1.3.1"/>
<plugin name="cordova-plugin-console" spec="1.0.5"/>
<plugin name="cordova-plugin-statusbar" spec="2.2.1"/>
<plugin name="cordova-plugin-device" spec="1.1.4"/>
<plugin name="cordova-plugin-splashscreen" spec="~4.0.1"/>
<icon src="resources\android\icon\drawable-xhdpi-icon.png"/>
<allow-navigation href="http://192.168.1.3:8100"/>
<allow-navigation href="http://192.168.1.3:8101"/>
<allow-navigation href="http://192.168.1.2:8100"/>
<allow-navigation href="http://192.168.8.105:8100"/>
</widget>
Here is the http file of the relevant page:-
<!--
Generated template for the Vacancy page.
See http://ionicframework.com/docs/v2/components/#navigation for more info on
Ionic pages and navigation.
-->
<ion-header>
<ion-navbar>
<ion-title>Vacancy</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<ion-list no-lines *ngIf="vacancy">
<ion-item >Contract Type : {{vacancy.value}}</ion-item>
<ion-item >Company : {{item.company_name}}</ion-item>
<ion-item >Deadline : {{ deadlinetime }}</ion-item>
<ion-item >Job ID : #JD{{ item.id }}</ion-item>
</ion-list>
<h2 *ngIf="vacancy" orientation="center">{{item.job_title}}</h2>
<div *ngIf="image" [innerHtml]="image"></div>
</ion-content>

Answer 1

I would try:
Component:
imageSrc:string//class variable
LoadImage(){
const transfer = new Transfer();
var url = "http://demo.observerjobs.lk/storage/public/uploads/vacancies/"+this.hash+"/"+this.attachment;
var uri = encodeURI(url);
var filepath = cordova.file.cacheDirectory+ '/' + this.vacancy.attachment;//("/"+this.vacancy.attachment);
transfer.download(uri, filepath, true ).then((entry) => {
console.log('download complete: ' + entry );
this.imageSrc = entry.toUrl();
console.log(this.imageSrc);
}).catch(error => {
console.log(JSON.stringify(error));
});
}
HTML:
<img *ngIf="imageSrc" [src]="imageSrc"></img>