Android Hybid 应用程序使用 Ionic 框架显示远程图像时出现问题？

我是离子的新手。 我正在使用 Ionic Framework (1.3.20)、Angular JS、Cordova 5.0.0

模板文件browser.html代码：

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

app.js code:

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

控制器.js code

.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

配置文件 file:

  <access origin="*"/>

Error在控制台上：

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

我验证了网址http://lorempixel.com/160/160/people/3在我的移动浏览器中显示图像。但该图像未出现在应用程序上。

使用将域列入白名单科尔多瓦插件白名单解决了这个问题。

通过 CLI 添加插件：

cordova plugin add cordova-plugin-whitelist

然后将以下代码行添加到您的应用程序中配置文件:

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

and

this meta标签在你的index.html

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

EDIT:这个问题的原因：

从 Cordova 4.0.0 Android 更新开始：

白名单功能已改进

• 您需要添加新的 cordova-plugin-whitelist 插件才能继续使用白名单

• 现在支持设置内容安全策略（CSP），并且是推荐的白名单方法（请参阅插件自述文件中的详细信息）

• 如果没有该插件，网络请求默认会被阻止，因此安装此插件甚至可以允许所有请求，即使您是 使用 CSP。

• 这个新的白名单经过增强，更加安全和可配置，但旧版白名单行为仍然可以通过单独的 插件（不推荐）。

注意：虽然严格来说不是此版本的一部分，但最新的默认应用程序 由 cordova-cli 创建的默认情况下将包含此插件。