Проблема с Android Hybid app для отображения удаленного изображения с помощью Ionic framework?

Я новичок в Ionic. Я использую Ionic Framework (1.3.20), Angular JS, Cordova 5.0.0

Файл шаблона browse.html код:

<div class="col-50"><img ng-src="{{availableImages[currentImage].src}}" /></div>

app.js код:

.state('app.browse', {
    url: "/browse",
    views: {
      'menuContent': {
        templateUrl: "templates/browse.html",
        controller: 'Ctrl'
      }
    }
  })

controller.js код

.controller('Ctrl',function($scope) {
      $scope.currentImage = 0;
      $scope.availableImages = [
        {
          src: "http://lorempixel.com/160/160/people/3"
        }
        ];
      console.log("reading image in controller !!!");
})

Детали заголовка:

Request URL:http://lorempixel.com/160/160/people/3
Request Method:GET
Status Code:404 Not Found (from cache)
Response Headers
Client-Via:shouldInterceptRequest
Request Headers
Provisional headers are shown
Accept:image/webp,*/*;q=0.8
User-Agent:Mozilla/5.0 (Linux; Android 5.0.2; XT1033 Build/LXB22.46-28; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/42.0.2311.129 Mobile Safari/537.36

Файл Config.xml:

  <access origin="*"/>

Ошибка на консоли:

GET http://lorempixel.com/160/160/people/3 404 (Not Found)

Я проверил URL http://lorempixel.com/160/160/people/3 показывает изображение в моем мобильном браузере. но изображение не появляется в приложении.

Ответы

Ответ 1

Устранение неполадок в доменах с помощью cordova-plugin-whitelist.

Добавьте плагин через CLI:

cordova plugin add cordova-plugin-whitelist

а затем добавьте следующую строку кода в ваше приложение config.xml:

<allow-navigation href="http://*/*" />

и

этот тег meta в вашем index.html

<meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'">

РЕДАКТИРОВАТЬ: Причина этой проблемы:

От Cordova 4.0.0 для Android:

Функциональность белого списка обновляется

  • Вам нужно будет добавить новый плагин cordova-plugin-whitelist, чтобы продолжить использование белого списка

  • Настройка политики безопасности контента (CSP) теперь поддерживается и является рекомендуемым способом для белого списка (см. подробности в readme).

  • Сетевые запросы блокируются по умолчанию без плагина, поэтому установите этот плагин, чтобы разрешить все запросы, и даже если вы используя CSP.

  • Этот новый белый список улучшен, чтобы быть более безопасным и настраиваемым, но поведение белого списка старых доступен по отдельности плагин (не рекомендуется).

Примечание: в то время как не строго часть этого выпуска, последнее приложение по умолчанию созданный cordova-cli, будет включать этот плагин по умолчанию.

Ответ 2

Создайте этот plnkr: http://plnkr.co/edit/GprtU3r8NDgYwO6jGRkp?p=preview

Мой html файл:

<div><img ng-src="{{ availableImages[currentImage].src }}" /></div>

Javascript:

$scope.currentImage = 0;
$scope.availableImages = [{
  src: "http://lorempixel.com/160/160/people/3"
}];

Кажется, все в порядке... Протестировано с угловыми значениями 1.3.15