CODEWITHSUNDEEP
imageangularjscordova
Daniel R.
Daniel R.

Reputation: 517

WindowsPhone 8 and AngularJs - ng-src not working?

Im trying to run my (Phonegap / Angular) App on a Windows Phone Emulator. Everything works fine but some images are not be displayed. I figured out that ng-src is the troublemaker. When im using src instead of ng-src for local images in the same folder - it works fine.

Here some examples:

dispalyed:

<img ng-click="mediaPlay()" ng-hide=showButton() src="img/go.png" style="float: right">

not displayed:

<img ng-src="img/{{poi.poiimage}}" style="display: block; margin: 0 auto">

My App works perfect on Android and IOs.

Any ideas how to fix this?

EDIT*

Ok now its getting weird o0... I've putted this "img/{{poi.poiimage}}" in a p tag and it gives me this path: img/poi-12-galgentor-01.png

So i tried it with src:

<img  src="img/12-galgentor-01.png" style="display: block; margin: 0 auto">

And ng-src:

<img  ng-src="img/12-galgentor-01.png" style="display: block; margin: 0 auto">

Both worked for me!

But this...

<img ng-src="img/{{poi.poiimage}}" style="display: block; margin: 0 auto">
<img src="img/{{poi.poiimage}}" style="display: block; margin: 0 auto">

does not work.

Edit2*

Tested in the emulators browser ... works fine too. -.-

Upvotes: 3

Views: 3006

Answers (4)

Suman Barick
Suman Barick

Reputation: 3411

I am making a Windows Universal App with Cordova and AngularJS. I tried all the solutions above and others that I found in internet, but nothing worked...

Then, I found that in my Windows 10 (pc) the img src attributes were appended with ms-appx. So, I added ms-appx with other options in imgSrcSanitizationWhitelist and it is now working...

So, my code looks like, this,

$compileProvider.imgSrcSanitizationWhitelist(/^\s*(https?|ftp|file|ms-appx|chrome-extension|x-wmapp.?):|data:image\//);

I will update this answer after I test my app in Windows Phone 8.1 and Android.

Upvotes: 0

Derek
Derek

Reputation: 431

Windows Phone uses a different internal url prefix: "x-wmapp". I have seen it use "x-wmapp0" so to be safe I modified the standard imgSrcSanitizationWhitelist as follows:

$compileProvider.imgSrcSanitizationWhitelist(/^\s*(https?|ftp|file|chrome-extension|x-wmapp.?):|data:image\//);

Upvotes: 4

Lorenzo
Lorenzo

Reputation: 433

this is not a solution per se: Angularjs is broken on WP8 devices.

A colleague of mine is working on a fix. I've pinged him and will post more info when I have it.

-- edit -- here is an issue on the Angular.js board which seems to indicate that the problems with angular on wp8 have been resolved in CDV 3.4.0

Upvotes: 0

Daniel R.
Daniel R.

Reputation: 517

this is not a solution per se: Angularjs is broken on WP8 devices.

no it is not...

i got it:

It is just a Problem with old IE's and Windows Phones. SrcUrls have to be whitelistet. Otherwhise angular generates a "unsafe:" prefix on every src Url. It can be fixed by changing the angular apps config like below:

schreibwerkApp.config(['$routeProvider', '$compileProvider',
    function ($routeProvider, $compileProvider) {
        $compileProvider.imgSrcSanitizationWhitelist('img/');

        $routeProvider.
            when('/splash', {
                templateUrl: 'partials/splash.html'
            }).
            when('/terms', {
                templateUrl: 'partials/terms.html'
            }).
            when('/intro', {
                templateUrl: 'partials/intro.html'
            }).
            when('/poi/:stationID', {
                templateUrl: 'partials/poi.html',
                controller: 'PoiCtrl'
            }).
            when('/directive', {
                templateUrl: 'partials/directive.html'
            }).
            when('/imgview/:stationID/:imgID', {
                templateUrl: 'partials/imgview.html',
                controller: 'ImgCtrl'
            }).
            otherwise({
                redirectTo: '/splash'
            });
}]);

Upvotes: 15

Related Questions