Having an issue with my Cordova application designed for Windows 8.1, I am trying to capture a photo and display it on the screen while also saving it in the local folder.
Within one of my directives, I have the following function:
scope.takePhoto = function () {
var myScope = scope;
navigator.camera.getPicture(function (imageURI) {
console.log('Method getPhoto succeed');
myScope.addPhoto(imageURI);
}, getPhotoOnFail, {
quality: 50,
destinationType: Camera.DestinationType.FILE_URI
});
}
scope.addPhoto = function (fileUri) {
scope.entity.previewCaptured = {fileUri: fileUri, datetime: new Date()};
}
And in the template, there is an image tag:
<img alt="{{entity.previewCaptured.fileUri}}" ng-src="{{entity.previewCaptured.fileUri}}" title="{{entity.previewCaptured.datetime}}">
After using the system camera application to take a photo and accepting it, instead of the photo displaying correctly, the alt attribute shows the same value as the src. This alt value is:
ms-appdata:///local/zdjęcie000.png
I have verified
Windows.Storage.ApplicationData.current.localFolder.path
, which points to C:\Users\user\AppData\Local\Packages\{app_name}\LocalState
. I confirmed the existence of the file zdjęcie000.png within that path.
Although ms-appdata:///
theoretically works with Windows apps, specifically mentioned in this source for Windows 8, I encountered issues even when attempting to use the absolute path
C:\Users\user\AppData\Local\Packages\{app_name}\LocalState
in the src attribute. Additionally, employing the $timeout
function for a delay in displaying the image did not resolve the problem.
Plugins installed include: file, file transfer, Camera, Capture, and file Opener2
Configuration details from my config.xml:
(insert your configuration here)
In an effort to address the issue of displaying external images (<img src="http://xxx">
), I manually added the section found at
/res/native/windows/package.windows.appmanifest
:
(insert your app manifest configuration here)