How to load file:// images in Cordova iOS platform?

[SiavashBamshadnia]

Hi!
Please answer my question on stackoverflow:
https://stackoverflow.com/questions/57926513/how-to-load-file-images-in-cordova-ios-platform
Thanks.

[gvanmat]

The images can only be read from the www folder of the applications bundle.

[SiavashBamshadnia]

Thanks for your attention, @gvanmat !
You mean there ins't any way to show images in app data on WKWebView?

[gvanmat]

Images must be located under the context root if served from the local device. The context root I where the index.html page lives which is the app bundle and www folder. This is no different than standard web development. Images loaded from under the subtree where the document is loaded is from self. Images loaded from a different domain are cross origin.

…

On Fri, Sep 13, 2019, 10:05 PM Siavash Bamshadnia ***@***.***> wrote: Thanks for your attention, @gvanmat <https://github.com/gvanmat> ! You mean there ins't any way to show images in app data on WKWebView? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#44?email_source=notifications&email_token=AEGCGU33SKHGEL4DVRTLG5TQJRPI5A5CNFSM4IWTAGF2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD6WTVQQ#issuecomment-531446466>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AEGCGU73GQMVEHCKRZTI5CLQJRPI5ANCNFSM4IWTAGFQ> .

[lovelyelfpop]

The images under file:///var/mobile/Applications/Container/Data/<GUID of app>/tmp/ can be loaded, it's not a cross origin issue, it's just apple don't let you display images located on anywhere Else

[gvanmat]

Using this plug-in, you can load resources from any location under the applications bundle www folder using xhr. The target resources must be under the folder from where the index.html is loaded.

[ramgrg]

Isn't it possible through base64?

[lovelyelfpop]

Base64 causes OOM

[sajallimbu]

So is there a fix to load images from file:// ? I can load images by copying them in temp but this causes issues with memory when loading more images and some features that require to get images whenever a certain page is loaded.

[peppertech]

This is not something that can be "fixed" It is a security issue to be able to load files outside of the app root. It will not be enabled. As @gvanmat said in an earlier answer:

Using this plug-in, you can load resources from any location under the applications bundle www folder using xhr. The target resources must be under the folder from where the index.html is loaded.

[mgoetz85]

So just to make sure I got this right:
there is no chance to save an image in e.g. NoCloud dataDirectory and show it in an tag?

[ragcsalo]

Can you write an example code of loading a local image (from the www/img folder) to a HTML5 canvas element, and getting the image data without getting a CORS error? Now I use this code, which loads the image just fine:

img.src = cordova.file.applicationDirectory+'www/img/image.png';

But when I try to access the image data using ctx.getImageData() I still get a CORS error.
Also if I use the crossorigin attribute img.crossOrigin = 'Anonymous'; then the image won't load at all...

[lovelyelfpop]

Use this plugin https://github.com/communico/cordova-httpd to start a local server inside app

cordova.plugins.CorHttpd.startServer({
    'www_root': cordova.file.dataDirectory.replace( 'file://', '' ),
    'port': 8080,
    'localhost_only': false
}, function( url ){
    // eg. http://10.0.0.185:8080/
    // if localhost_only is true，then url is http://127.0.0.1:8080/
    console.log(url);
}, function( error ){
    console.log(error);
});

For example, if a file path looks like：
file:///data/user/0/com.pushsoft.aio5app/files/image/7c8f2985-01b3-4fd2-ad7b-f39812a920a2

you can use this url to show the image：
http://127.0.0.1:8080/image/7c8f2985-01b3-4fd2-ad7b-f39812a920a2

[fattanasio]

Hi, i have same problem to show a preview of an images captured with cordova-plugin-camera. This photo is in file://etc....
Can't I preview this file?
Thank you, bye

[ptorrent]

Hello,

Is it possible to write a file (ex: an image) into the context root directory (where is index.html) and read it with file:// ?

Thanks for your help

[lovelyelfpop]

@ptorrent Assets directory is readonly.