Downloaded image is not displayed - ionic 3.8

My app download the image file from external server, then display it in the view.
It used to work file with older ionic version (3.3) but not working anymore with 3.8.

I download image like this:

    const fileTransfer: FileTransferObject = this.transfer.create();

    const url = 'http://xxxxxxxxx/content/img/test.png';, this.file.dataDirectory + "test.png").then((entry) => {
      console.log('download complete: ' + entry.toURL());  // I always enter here.
    }, (error) => {
      // handle error

Download complete successfully and stored in:
File check return true when I try to check if it is stored in intended location.

  checkFile(path: string){
    this.file.checkFile(this.file.dataDirectory, path)
    .then(() => {
      // exist.
      console.log("exist!!!");  // I always enter here
    .catch((err) => {
      // try again
      console.log("ERR : " + err);

So, the file exist in this.file.dataDirectory.
However when the app displays the downloaded image in the view, the image does not show.

<ion-content padding>
  <button ion-button color="secondary" (click)="download()">Download</button>
  <img src="{{file.dataDirectory}}test.png">

I tried with different directories but nothing worked:

  • this.file.dataDirectory
  • this.file.documentDirectory
  • cdvfile://localhost/library-nosync/

I also tried with ion-img instead img, but no luck.

Can anyone please help me to solve the issue?
Thank you!

My environment:
@ionic/cli-utils : 1.16.0
ionic (Ionic CLI) : 3.16.0
cordova (Cordova CLI) : 7.0.1
@ionic/app-scripts : 3.0.1
Cordova Platforms : ios 4.4.0
Ionic Framework : ionic-angular 3.8.0
ios-deploy : 1.9.1
Node : v7.10.0
npm : 5.5.1
OS : macOS Sierra
Xcode : Xcode 8.3.2 Build version 8E2002

If you are using wkwebview(which is now default for new apps)
then follow below steps,

  1. import { normalizeURL} from ‘ionic-angular’;

  2. store your image path in some new variable.
    var imagePath = this.file.dataDirectory + “test.png”;
    this.tempImagePath = normalizeURL(imagePath);

  3. then in your html file,
    use tempImagePath as image src.


Thanks a lot Ankit, it works like a charm!

Update: Found this page, the change to WKWebView is well described.


1 Like

Hi Ankit,

I have downloaded image using following code ,

this.storageDirectory = cordova.file.documentsDirectory; ( As i am targetting ios at the moment)

downloadImage(image) {

this.platform.ready().then(() => {

  const fileTransfer: TransferObject = this.transfer.create();

  var url = encodeURI("");, this.storageDirectory + image).then((entry) => {

    const alertSuccess = this.alertCtrl.create({
      title: `Download Succeeded!`,
      subTitle: `${image} was successfully downloaded to: ${entry.toInternalURL()}`,
      buttons: ['Ok']

    this.isImage = true;
    this.internalSrc = entry.toURL();

  }, (error) => {

    const alertFailure = this.alertCtrl.create({
      title: `Download Failed!`,
      subTitle: `${image} was not successfully downloaded. Error code: ${error.code}`,
      buttons: ['Ok']





i am getting success alert but i am not able to display this downloaded image in iphone .
This is my html code ,

  <img *ngIf="isImage" [src]="internalSrc" alt="pug"/>

I tried with your solution normalizeURL as well !

Am i missing anything ?

Any help would be appreciated.


This does not work for me - ios 11 iphone X simulator. When I normalize the URL, I get something like “http://localhost:8080/Users/…” but the image is still not displayed. Is there some permission in config.xml or index.html that needs to be set. Thanks.

Got it working? Looks like even I have same issue.

1 Like

make the local server of the folder if you want to access file for mobile

below link will give a clear explanation of how to do it.