Show images from data directory. (V4)


I have the following problem:

I’m doing an app were the users must select a zip file that the app will parse. I unzip the content (images) into the data directory and then move them to the files directory.

My problem is that when I try to show these images in the view I just cant, I’ve searched the forum but no solution seems to work for me.

Here is how I’m saving the path after I moved the images:

  this.path = (this.file.dataDirectory + 'files/' +;

Then to show them in the view I’m doing:

<img [src]="path">

I’ve checked and the images are indeed in the correct directory after moving them and the name is correct too.
Any Ideas?


You should put double quotes around path:

<img [src]="path">

Hope this helps.

I was doing it like that, it was an error on the post.

In the end the solution is that you have to change the native url to a “web” url, by using Capacitor.convertFileSrc('file://your/image/path/').