I'm trying to be able to display images that can be edited in the back end, but these have to be available while offline too. To acomplish this goal I'm downloading these images with the following method (which is the only one that worked for me)

```
download_save_picture(picture_url) {
  let splited_url = picture_url.split('/');
  var filename = splited_url[splited_url.length - 1];

  var config = { responseType: 'blob' as 'blob' };

  this.httpClient.get(picture_url, config).subscribe(
    data => {
      this.file.writeFile(this.file.dataDirectory, filename, data, { replace: true });
    },
    err => console.error(err),
    () => { }
  );
}

```

And then I can verify that these files exist and that their weight is also different from 0, so I guess everyting is correct until this point.

```
this.file.checkFile(this.file.dataDirectory, filename)
.then(() => {
  alert("File Exist!!!");  // I always enter here
})
.catch((err) => {
  alert("ERR : " + err);
});

this.file.resolveLocalFilesystemUrl(this.file.dataDirectory + filename).then((entry: any)=>{
  entry.getMetadata((metadata) => {
      alert("SIZE: " + metadata.size);
  })
}).catch((error)=>{
  alert(error);
});

```

**So the next step is to display the image which is in the path `this.file.dataDirectory + filename`**, how can I do this?

After searching for a solution and reading I understand that I have to:

1. Load the file binary content.
2. Convert this binary content to base 64.
3. Then display it with `src="data:image/jpeg;base64,"+{{image_in_base64}};`

But until now I've not been able to do steps 1 (load the file content) and 2 (convert it to base 64), how can I do that?