Search code examples
cordovawindows-phone-8ionic-framework

How can I display an image captured on a windows phone when using the Ionic Framework?


I know Ionic Framework does not officially support Windows Phone, however I am 90% of the way there.

My issue is that when I take a picture the URI I get back is in the format:

///CapturedImagesCache/WP_20150710_007.jpg

However when I try and utilise this in an <ion-slide-box> which contains an <img>, I just get a white page icon in the top corner (iOS and Android work perfectly). The image is not displayed. Has anybody else managed to display a Windows Phone captured image?


Solution

  • Finally worked out why I couldn't see the image. The URI given back was of the format: ///CapturedImagesCache/WP_20150710_007.jpg

    When I setup an alert on the <img onerror="alert(this.src);"> I found that the src had the unsafe: prefix. I had the added the imgSrcSanitizationWhitelist to the controller module, however this was the wrong place, it is now in my main app.js before my .run section:

    .config(function($compileProvider){
        $compileProvider.imgSrcSanitizationWhitelist(/^\s*(https?|ftp|file|ms-appx|x-wmapp0):|data:image\//);
    }
    

    This regular expression allowed the img.src to have the path that was getting substituted.