Ionic v2下载并显示图片

Question

我想开发一个应用程序，我必须从网站下载并显示图像。这是我所使用的代码片段： -

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)); 

     }); 
    } 

我按以下格式创建的img标签： -

"<ion-img src= 'file:///data/user/0/package_name/cache/suo-01-29-012588-12x3-kbd.jpg'/>" 

但是，我无法访问此文件来显示。我做了什么错，我能做些什么来补救？

编辑： - 以下是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> 

下面是相关页面的HTTP文件： -

<!-- 
    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

我会尝试：

组件：

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>