Android/iOS: Show Image from Data directory

[KnowYourselves]

Hello!

I have been scratching my head against this problem but I just can't seem to solve it. Some context:

My app lets the user choose a zip file that has a csv file and a dir with multiple images. I unzip the information onto the data directory and move the images to the files folder within the data directory.

I save the paths as follows:

await parsedCsv.forEach((person, index) => {
      Filesystem.getUri({
        directory: FilesystemDirectory.Data,
        path: ''
      }).then(res => {
        const path = res.uri + '/files/' + person[3];  // person[3] is the file name, along the lines of person0.jpg
        group.persons.push({
          id: String(index),
          text1: person[0], 
          text2: person[1],
          imgUrl: path,
          collapsed: true
        });
      });
    });

Then on one of my views I try to show the images as follows:

<ion-img src="{{person.imgUrl}}"></ion-img> <!-- This within an ngFor let person of persons -->

It doesn't throw any errors but it doesn't show the images either, currently trying on an Android Oreo 8.1 with the command ionic capactior start android

I've tried many solutions and ideas I've come across online but nothing seems to work. Any advice?

Thanks!

[jcesarmobile]

You can't display file urls directly on the webview, you have to convert them to proper "web" urls. Since latest beta we provide the Capacitor.convertFileSrc('file://your/image/path/'). Also, for iOS, as it uses capacitor scheme, you will need to tell angular to trust that scheme. I think there are a few ways of doing that, one of them is using angular's DomSanitizer and SafeResourceUrl

[KnowYourselves]

Didn't know that, it worked like a charm, thanks!

[matthewbal]

That feature is awesome, we should mention it on the docs page for the filesystem plugin, I was really stumped trying to get local files to render/display on my native app, and having them work as a url makes it so much easier and interoperable with other web based libraries.

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Capacitor, please create a new issue and ensure the template is fully filled out.