У меня проблема с 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? Проблема кодирования?
В платформе 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" к шаблону строки.
Angular оценивает выражение в ng-src, поэтому, вероятно, он ищет переменную с именем example.jpg, а не рассматривает ее как URL-адрес.
Если вы используете это, он должен работать:
<img ng-src="imgUrl">
И в вашем коде назначьте фактический URL-адрес переменной imgUrl.