CODEWITHSUNDEEP
ionic-frameworkionic3ionic-native
Ivan Javorovic
Ivan Javorovic

Reputation: 96

Ionic 3 display data directory image

I'm having issues displaying a image that is saved in my app directory.

In this part of the code I'm checking if my data directory has files, and if so get their name and save them to an array which i display in the view.

this.platform.ready().then(() => {
  file.listDir(this.file.dataDirectory,'').then((result)=>{

    for(let file of result){ //list of all files and directories

      if(file.isDirectory == true && file.name !='.' && file.name !='..'){

      }else if(file.isFile == true){
        this.items.push({
          title: this.fileDirectory+file.name //full path to file
        });

      }
    }
  });
});

I did a checkFile(path, file) and it did return true for the given path and file (image) i was trying to display.

This is the code in my view:

<ion-item *ngFor="let item of items" (click)="openFile(item.title)">
    <p>{{item.title}}</p>
    <img [src]="item.title"/>
</ion-item>

I have only one file downloaded (called ivan.jpg) in that folder for testing purposes. When I try to display the image i only get a broken image icon.

The path which is inserted with item.title is:

file:///data/user/0/com.javorovic.comodo/files/ivan.jpg

As I said, the file seems to exist but I can't display it in my view, I've been searching for an answer but can't seem to find it.

I've also tried adding <allow-navigation href="file://*/*" /> to my config.xml

Upvotes: 0

Views: 1549

Answers (1)

Ivan Javorovic
Ivan Javorovic

Reputation: 96

Well I solved it by doing the following:

uninstall webview

ionic cordova plugins rm cordova-plugin-ionic-webview

install old one:

ionic cordova plugins add [email protected]

clean cordova

cordova clean android

SOURCE

Upvotes: 1

Related Questions