Angular ng src not working in Visual Studio Cordova

Question

I have a ng-src problem in Cordova Visual Studio, where it worked prior in prior Cordova CLI version (i tried going back to 5, etc but it did not work).

I also have an image in its default:

<img src="example.jpg" />

and an angular image:

<img ng-src="example.jpg" />

side by side and the default is working but not the angular version.

I also tried $sceDelegateProvider fix but that didnt work either.

I am attaching my index.html code and screenshot of the 2 images (one is working).

            <!DOCTYPE html>
               <html>
                   <head>
                       <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">

                    <meta name="format-detection" content="telephone=no">
                    <meta name="msapplication-tap-highlight" content="no">
                    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
                    <link rel="stylesheet" type="text/css" href="css/index.css">
                    <title>TEST</title>
                </head>
               <body ng-app="">
                <h2>Device is Ready</h2>

                <div ng-init="myVar = 'pic_angular.jpg'">
                    <h1>Angular ng-src</h1>
                    <img ng-src="{{myVar}}" alt="this is where image should display">
                    <h1>img src</h1>
                    <img src="pic_angular.jpg" />
                </div>

                <div ng-app="">
                    <p>My expression: {{ 5 + 5 }}</p>
                </div>

                <script type="text/javascript" src="cordova.js"></script>
                <script type="text/javascript" src="scripts/platformOverrides.js"></script>

                <script type="text/javascript" src="scripts/index.js"></script>
                <script type="text/javascript" src="scripts/angular.min.js"></script>
               </body>
               </html>

Why is the ng-src not working? Is it cordova version issue? Visual Studio issue? Coding issue?

Which cordova platform? Do you get any errors on the console? Install the console plugin https://github.com/apache/cordova-plugin-console in cordova to see these errors) — Kris Erickson, Jun 01 '16 at 14:39
UPDATE: on Windows/local the images dont show up. But in ios and Android they do. Is there something overwriting the styles for Windows devices? — AivoK, Jun 01 '16 at 15:31
I haven't done much with windows and Angular, but I do know that if you are building a "Windows Store App", you have to do some ceremony with MSApp.execUnsafeLocalFunction and certain functions that it considers "unsafe" (see http://stackoverflow.com/questions/12792383/how-do-you-get-angular-js-to-work-in-a-windows-8-store-app). Also see: http://stackoverflow.com/questions/32454292/cordova-windows-8-1-on-visual-studio-2015-external-image-loading-to-img-tag?rq=1 — Kris Erickson, Jun 01 '16 at 23:14

score 2 · Accepted Answer · answered Jun 02 '16 at 07:09

In windows platform using angular to set the img-src, some prefix will be automatically added for safety reason. Please see "Fix URL Prefixes" Section of this blog.Thus the img won't load correctly.

To fix this issue add the following codes to your index.js file:

//"myApp" is the your module
myApp.config(['$compileProvider', function ($compileProvider) {
    $compileProvider.imgSrcSanitizationWhitelist(/^\s*(https?|ftp|file|ms-appx|ms-appx-web|x-wmapp0):|data:image\//);
}]);

Notes: different from the blog said, I added "ms-appx-web" to the string pattern.

Wow. That worked. Thank you for the blog page as well. – AivoK Jun 02 '16 at 12:26 — AivoK, Jun 02 '16 at 12:26

score 0 · Answer 2 · answered Jun 01 '16 at 16:51

0

Angular evaluates the expression in ng-src, so it is probably looking for a variable named example.jpg rather than treats it as an url.

If you use this, it should work:

<img ng-src="imgUrl">

And in your code assign the actual URL to the imgUrl variable.

answered Jun 01 '16 at 16:51

I am assigning ng-src="{{myVar}}" to the angular img. It shows up on ios and Android Ripple simulator but not for any Windows emulators. – AivoK Jun 01 '16 at 18:17

Angular ng src not working in Visual Studio Cordova

2 Answers2