Ionic2: Load and Save image to device using cordova-file-transfer
<p>I'm working on app in Ionic2 and I'm downloading an image using "<a href="https://github.com/apache/cordova-plugin-file-transfer" rel="nofollow">cordova-plugin-file-transfer</a>" with the following code thanks to(<a href="https://github.com/dsgriffin/ionic-2-file-transfer-example" rel="nofollow">ionic-2-file-transfer-example</a>):</p>

<pre><code>  downloadImage(image, name) {
      this.platform.ready().then(() =&gt; {
        const fileTransfer = new FileTransfer();
        let targetPath; // storage location depends on device type.

        // make sure this is on a device, not an emulation (e.g. chrome tools device mode)
        if(!this.platform.is('cordova')) {
          return false;
        }

        if (this.platform.is('ios')) {
          targetPath = cordova.file.documentsDirectory + name;
        }
        else if(this.platform.is('android')) {
          targetPath = cordova.file.dataDirectory + name;
        }
        else {
          // do nothing, but you could add further types here e.g. windows/blackberry
          return false;
        }

        fileTransfer.download(encodeURI(image), targetPath,
            (result) =&gt; {
         //Here i need to load it back
         this.img = targetPath; // &lt;&lt;-- ERROR -&gt; Can't load from device
            },
            (error) =&gt; {
     console.log("error: "+error);
            }
        );
      });
    }
</code></pre>

<p>Its working perfectly (The image is saved on the device), the thing is, I need to load this image (that I stored in my device) in my app.</p>

<p>I saw the following code in this cordova library:</p>

<pre><code>function readBinaryFile(fileEntry) {
    fileEntry.file(function (file) {
        var reader = new FileReader();

        reader.onloadend = function() {

            console.log("Successful file read: " + this.result);
            // displayFileData(fileEntry.fullPath + ": " + this.result);

            var blob = new Blob([new Uint8Array(this.result)], { type: "image/png" });
            displayImage(blob);
        };

        reader.readAsArrayBuffer(file);

    }, onErrorReadFile);
}
</code></pre>

<p>but, I couldn't succeed to use it (or to embed it in my code), anyone know how can I load back an image I stored and push it in to my ionic code: </p>

<pre><code>&lt;img [src]="avatar" style="margin: auto;" alt="Profile"&gt;
this.avatar = "???";
</code></pre>

<p>Thank you!!</p>