WkWebView loading local image files

Part of the app we are writing with Ionic captures photos and stores them on the local device filesystem, which are then displayed on various pages using their full path, e.g. cordova.file.dataDirectory + imageName. This was working beautifully until I installed the WKWebView plugin (as recommended in the ‘Preparing for iOS 9’ blog post), after which the images no longer display.

As I understand it, this plugin uses a local webserver to load files, but this does not appear to work. I have tried a number of different things, but cannot get the images loaded from the local file system now and cannot find a solution to this. Has anyone else had this issue and recommend a solution to load these images?

1 Like


There was an issue with the WKWebView under iOS 8 that it did not support the use of local resources. There is announced that this should be fixed in iOS9. The workaround for this issue is make use of a local http server on your phone. When you google this topic you find enhough hit that explain this in more detail.

Hey Pieter,

I realised that it was my misunderstanding of what the file URI should be after installing the plugin, I needed to use the /Library/ or /Documents/ as the root, rather than cordova.file.dataDirectory.
e.g. ng-src="/Library/NoCloud/{{imageName}}"

Hi @pthorp_tier2 i have exactly same issue, where users can take image using the camera and in the preview i just use the Image URI ng-src="{{imageName}}" . So can you please give more details how to tackle this issue. Also have you tested on IOS8 and less!
Thank you

Hi @m2m, we have not tested on any version prior to 8.4 - we are writing non-public app where we know that 8.4 (8.4.1) is the lowest version that requires support / testing. Loading the file from ‘/Library’ is works for 8.4, 9.0 & 9.1 for us.

hi pthorp_tier2,same as you ,but I still can’t show the image ,although I’ve put the file into ‘/Library’ directory ,under Ios 9.3,which webview plugin have you installed? I use this :enter link description here

Hey Jimmy, we’re using com.telerik.plugins.wkwebview plugin

hi @pthorp_tier2 do you download the image with file transfer plugin? if yes what version
im getting no luck with wkwebview and showing image when saved with file transfer plugin
im trying this

var assetURL = 'http:/someImage.jpg';
var imageName = 'image.jpg';
fileTransfer.download(assetURL, cordova.file.dataDirectory  + imageName,
            function (entry) {
                var iphoneUrl = entry.toURL();
                iphoneUrl = iphoneUrl.substring(iphoneUrl.search('/Library'),iphoneUrl.length);
                var img = document.getElementById('mainLoggedInImage');
                img.src = iphoneUrl ;
            function (err) {

this way i get image src to be /Library/NoCloud/image.jpg but all i get is error
Failed to load resource: the server responded with a status of 500 (Internal Server Error) http://localhost:12344/Library/NoCloud/image.jpg

the funny thing is i am also using com.telerik.plugins.wkwebview with cordova 4.0 ( ios 3.8)
im targeting ios version 8.4
any chance you could share a snippet of your code that downloads and shows image using wkwebview. also which version of cordova are you using?