Use FILE_URI from camera plugin in ngSrc

Question

I use ionic-native library to access the camera plugin with the following options:

let options = { quality: 50, destinationType: 1, sourceType: 1, allowEdit: false, encodingType: 1, mediaType: 0, correctOrientation: true, saveToPhotoAlbum: false, cameraDirection: 1 };

After taking the picture, I get the FILE_URI as file:///storage/emulated/0/Android/data/com.company.testApp/cache/1461661383435.png But when I use it in the ngSrc property of the img tag, It just displays an empty block. While inspecting with chrome, the request for the image has the status of (blocked:other)

Also I don't want to use DATA_URL, since it degrades the performance.

Answer 1

This answer was suggested in this post.

It is EXPLICITLY needed to allow access to local file resource at Android 4.4+.

Add the following lines to the config.xml:

<allow-navigation href="*"/> <allow-navigation href="file://*/*" />

And also set the Content-Security-Policy in index.html as

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

This doesn't work when using live reload.