iOS error Failed to load resource: unsupported URL - ios

Question

I'm using the chrisben imgcache.js plugin to cache images,
Since the change to WKWebview this plugin has stopped working for me. I've switched to v2.1.1 which is working fine on Android. I'm using Cordova with the following plugins
cordova-plugin-wkwebview-engine: 1.2.1
cordova-plugin-wkwebview-file-xhr: 2.1.4
The following noted from the console indicates the file is downloaded/stored correctly but when fetching it it fails.
> [Log] INFO: Download complete:
> file:///Users/shadow4768/Library/Developer/CoreSimulator/Devices/3965C47C-7718-48C3-82ED-DF9A2CCB3989/data/Containers/Data/Application/3BFC0F90-F7D4-4DFA-8648-0F440929F835/Library/NoCloud/imgcache/5b1950b1ee383f3fdd0e51bf84dfdbd505006d79
> (cordova.js, line 1540) [Log] INFO: Cached file size: 37161
> (cordova.js, line 1540) [Log] INFO: current size: 2533404 (cordova.js,
> line 1540) [Log] INFO: com.apple.MobileBackup metadata set
> (cordova.js, line 1540) [Log] INFO: File
> getdocument?documentid=41623&width=300 loaded from cache (cordova.js,
> line 1540) [Error] Failed to load resource: unsupported URL
> cdvfile://localhost/library-nosync/imgcache/91c59e590d88a60c252d8281aa165be35a7d5798
The only solutions I have found are related to Ionic,
I initially thought the below code was a fix to realise it might not have been compatible with what I'm using as only some of the functions were now working.
ImgCache.getCachedFileURL(src,
(originalUrl, cacheUrl) => {
const file = new File();
const cacheFileUrl = cacheUrl.replace('cdvfile://localhost/persistent/', file.documentsDirectory);
const localServerFileUrl = cacheFileUrl.replace('file://', 'http://localhost:8080');
//localServerFileUrl contains the loadable url
resolve(localServerFileUrl);
},
(e) => {
console.error('img-cache-error:', e);
reject(e)
});
Any ideas on how I could get around this issue would be greatly appreciated.