Use FILE_URI from camera plugin in ngSrc

Ionic Framework ionic-v3
1

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 src 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.

2

That is because ngsrc property doesn’t exist in angular2. Just assign your response to a variable and use the [src]=“myVar” syntax. Obviously myVar is whatever u assign the response .

3

Sry I really meant src not ngSrc and I’ve corrected it in the question.
I’ve also solved this issue by adding the tags

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

in the config.xml and the meta tag

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

in the index.html. Thank you.

1 Like