CODEWITHSUNDEEP
javascripthtmlangularjscordovavisual-studio-2015
AivoK
AivoK

Reputation: 105

Angular ng src not working in Visual Studio Cordova

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?

enter image description here

Upvotes: 0

Views: 571

Answers (2)

Elvis Xia - MSFT
Elvis Xia - MSFT

Reputation: 10831

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.

Upvotes: 2

user6269864
user6269864

Reputation:

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.

Upvotes: 0

Related Questions