Angular ng src не работает в Visual Studio Cordova

Question

Angular ng src не работает в Visual Studio Cordova

0

У меня проблема с ng-src в Visual Studio Visual Studio, где она работала ранее в предыдущей версии CLI Cordova (я попытался вернуться к 5 и т.д., Но это не сработало).

У меня также есть изображение по умолчанию:

<img src="example.jpg" />

и угловое изображение:

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

бок о бок, и по умолчанию работает, но не угловая версия.

Я также попытался установить $ sceDelegateProvider, но это тоже не сработало.

Я прилагаю код index.html и снимок экрана из 2 изображений (один работает).

            <!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>

Почему ng-src не работает? Это проблема версии cordova? Проблема с Visual Studio? Проблема кодирования?

AivoK 01 июнь 2016, в 16:29

Источник

0

Какая кордовая платформа? Вы получаете какие-либо ошибки на консоли? Установите плагин консоли github.com/apache/cordova-plugin-console в cordova, чтобы увидеть эти ошибки)
Kris Erickson 01 июнь 2016, в 14:39
0

ОБНОВЛЕНИЕ: в Windows / локальные изображения не отображаются. Но в ios и Android они делают. Есть ли что-то перезаписывающее стили для устройств Windows?
AivoK 01 июнь 2016, в 15:31
0

Я мало что сделал с окнами и Angular, но я знаю, что если вы создаете «Приложение для Магазина Windows», вам нужно поработать с MSApp.execUnsafeLocalFunction и некоторыми функциями, которые он считает «небезопасными» (см. Stackoverflow. com / questions / 12792383 /… ). Также смотрите: stackoverflow.com/questions/32454292/…
Kris Erickson 01 июнь 2016, в 23:14

Показать ещё 1 комментарий

Теги:

javascript

html

angularjs

cordova

visual-studio-2015

2 ответа

0

Angular оценивает выражение в ng-src, поэтому, вероятно, он ищет переменную с именем example.jpg, а не рассматривает ее как URL-адрес.

Если вы используете это, он должен работать:

<img ng-src="imgUrl">

И в вашем коде назначьте фактический URL-адрес переменной imgUrl.

K48 01 июнь 2016, в 14:39

0

Я назначаю ng-src = "{{myVar}}" для углового img. Он отображается на симуляторе ios и Android Ripple, но не для эмуляторов Windows.
AivoK 01 июнь 2016, в 18:17

Ещё вопросы

Какая кордовая платформа? Вы получаете какие-либо ошибки на консоли? Установите плагин консоли github.com/apache/cordova-plugin-console в cordova, чтобы увидеть эти ошибки)
ОБНОВЛЕНИЕ: в Windows / локальные изображения не отображаются. Но в ios и Android они делают. Есть ли что-то перезаписывающее стили для устройств Windows?
Я мало что сделал с окнами и Angular, но я знаю, что если вы создаете «Приложение для Магазина Windows», вам нужно поработать с MSApp.execUnsafeLocalFunction и некоторыми функциями, которые он считает «небезопасными» (см. Stackoverflow. com / questions / 12792383 /… ). Также смотрите: stackoverflow.com/questions/32454292/…
Я назначаю ng-src = "{{myVar}}" для углового img. Он отображается на симуляторе ios и Android Ripple, но не для эмуляторов Windows.

Elvis Xia - MSFT · Accepted Answer · 2016-06-02T05-08-00.000Z

В платформе Windows, использующей угловое значение для установки img-src, некоторый префикс будет автоматически добавлен по соображениям безопасности. См. Раздел "Исправить URL-префиксы" этого блога. Таким образом, img не будет загружаться правильно.

Чтобы устранить эту проблему, добавьте следующие коды в файл index.js:

//"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\//);
}]);

Примечания: в отличие от блога, я добавил "ms-appx-web" к шаблону строки.

Ух ты. Это сработало. Спасибо за страницу блога.