Ionic 3 image local application folder not showing

0
votes

I have downloaded some images to my app. They get stored in the application directory. This is one of the urls: 

file:///Users/w3/Library/Developer/CoreSimulator/Devices/CE0C21C3-2A3C-4C2F-AFF5-3A034A17F1EC/data/Containers/Data/Application/45AC6BC6-B8C2-433C-8E6C-3356EFAEB2B2/Library/NoCloud/WinGD%20Low-speed%20Engines%202017.jpg

If I paste this link into any browser the image shows fine. When placing it into an image tag inside my view, the image does not show. Changing the path to a wrong path shows the questionmark icon for not found. So the image should gets found by the device.

<img class="brochure" src='file:///Users/w3/Library/Developer/CoreSimulator/Devices/CE0C21C3-2A3C-4C2F-AFF5-3A034A17F1EC/data/Containers/Data/Application/304605E4-72D7-4C0F-9027-E46EC0C76C1E/Library/NoCloud/test.png'>

I have tried it with [src] and various additions to my config.xml

<allow-intent href="file:*" />
<access origin="file://*" />

and my index.html file. 

  <meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'">

No change. I´m testing on an ios11 emulator + on my physical device. Any help would be appreciated! Thank you!

UPDATE:

I'm getting the filepath like (with cordova-plugin-file):

this.file.resolveLocalFilesystemUrl(this.file.dataDirectory+"test.png").then(result => {
   console.log("beforeresult:"+this.file.dataDirectory + "test.png")
   console.log("result"+result.nativeURL)
   return result.nativeURL;
}, error =>{
   return JSON.stringify(error);
});
4
angularionic-frameworkionic2

4 Answers

2
votes

If you are using wkwebview, you can follow these steps:

import { normalizeURL} from 'ionic-angular';

Store your image path in some new variable.

var imagePath = this.file.dataDirectory + "test.png";
this.tempImagePath = normalizeURL(imagePath);

Then in your html file, just use tempImagePath as image src.

The change is described here: https://ionicframework.com/docs/wkwebview/

2
votes

If those images are static files, then you need to put them in the assets folder and reference them with a relative path. if you need your app to by able to reach the storage, you need to install a cordova plugin as explained here

1
votes

Sanitize the URL before using it:

import { DomSanitizer, SafeUrl } from '@angular/platform-browser';

public displayImage: SafeUrl;
...
constructor( private sanitizer: DomSanitizer, .... ) {}
...

prepareImage(imageData)
{
    if(imageData!= null)
    {

        this.displayImage = this.sanitizer.bypassSecurityTrustUrl(imageData);
    }
}

In template:

<img [src]="displayImage">
0
votes

Please replace your path like this.

The problem with file:/// just replace with file://

this.ImageData = imagePath.replace(/^file:\/\//, '');