使用Android Hybid应用程序来显示Ionic框架的远程图像问题？

Question

我是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)

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

Answer 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 for Android的更新:

白名单功能得到了改进

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

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

• 默认情况下,网络请求在没有插件的情况下被阻止,因此安装此插件甚至允许所有请求,即使您使用的是CSP.

• 此新白名单已增强为更安全和可配置,但旧版白名单行为仍可通过单独的插件(不推荐)使用.

注意:虽然不是此版本的严格部分,但cordova-cli创建的最新默认应用程序默认包含此插件.

Answer 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"
}];

看来一切都好......
用 angularjs 1.3.15 测试