Downloaded image is not displayed - ionic 3.8

Ionic Framework ionic-v3
1

Hi,
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:

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

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

Download complete successfully and stored in:
this.file.dataDirectory
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">
</ion-content>

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

2

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.

3 Likes
3

Thanks a lot Ankit, it works like a charm!

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

Best

1 Like
4

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("https://i.pinimg.com/736x/16/a8/eb/16a8eb1a9dfab022ea92cb0d66b0a6c1--corgi-puppies-baby-corgi.jpg");


  fileTransfer.download(url, 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();
    alertSuccess.present();

  }, (error) => {

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

    alertFailure.present();

  });

});

}

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.

Thanks!

5

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.

6

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

1 Like
7

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.