Ionic framework Ionic v2下载并显示图像

我正试图开发一个应用程序，我必须下载和显示一个网站上的图像。这是我使用的代码片段：-

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

      });
  }

LoadImage（）{
常量传输=新传输（）；
变量url=”http://demo.observerjobs.lk/storage/public/uploads/vacancies/“+this.hash+”/“+this.attachment；
var uri=encodeURI（url）；
var filepath=cordova.file.cacheDirectory+'/'+this.空缺.attachment；/（“/”+this.空缺.attachment）；
下载（uri、文件路径、true）。然后（（条目）=>{
console.log（'下载完成：'+条目）；
此项。image=“”；
console.log（this.image）；
}).catch（错误=>{
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>

模糊
一款很棒的Ionic/Cordova应用程序。
离子框架小组

以下是相关页面的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>

空缺
合同类型：{{空缺.价值}
公司：{{item.Company_name}
截止日期：{{deadlinetime}
作业ID:#JD{{item.ID}
{{item.job_title}

我会尝试：

组成部分：

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:

我会尝试：

组成部分：

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:

你能分享你的html代码和config.xml吗？当您使用cordovaI时，您的config.xml是可用的。我将共享配置代码，但您指的是什么html代码？@Ricardo我已经添加了config.xml和相关的html文件。它只与

img

tag一起工作吗？@suraj不，它不工作。您能共享您的html代码和config.xml吗？当您使用cordovaI时，您的config.xml是可用的。我将共享配置代码，但您指的是什么html代码？@Ricardo我已经添加了config.xml和相关的html文件。它只与

img

标记一起工作吗？@suraj不，它不工作。