wkwebview - Cordova + cordova-ios 6.1.0 - load local image

Question

I have a cordova app that worked great prior to using cordova-ios 6.x.

This app downloads couple of images into cordova.file.dataDirectory for offline access.... so far I haven't been able to find a way to display this image other than using local webserver plugin.

Isn't there any other built-in way how to allow serve content from the cdvfile scheme ? [i need to set an img src] as there may be many images, converting to base64 is not an option for me.

Any help appreciated

Answer 1

For anyone struggling as I was. There is a solution, which requires no significant change to the code.

There are 2 steps required:

First update your config.xml with following

<platform name="ios">    
  <preference name="scheme" value="app" />
  <preference name="hostname" value="localhost" />
 </platform>

Then convert your file:// link by using the undocumented method

window.WkWebView.convertFilePath(filePath)

This method performs the conversion into a virtual localhost link that makes the file accessible and bypasses the WkWebView restrictions. A little bit longer sample goes like this

let localFile = cordova.file.dataDirectory + 'logo.png';
let convertedPath = window.WkWebView.convertFilePath(localFile);
document.getElementById("myImg").src = convertedPath;