问题与Android Hybid应用程序显示远程图像与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) 

我validation了http://lorempixel.com/160/160/people/3url在我的移动浏览器中显示图片。 但图像不是在应用程序上。

使用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的更新:

白名单function已被修改

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

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

  • networking请求在没有插件的情况下被默认阻止,所以即使是在使用CSP的情况下,也要安装这个插件来允许所有的请求。

  • 这个新的白名单被增强为更安全和可configuration,但传统的白名单行为仍然可以通过一个单独的插件(不推荐)。

注意:虽然这个版本并不是严格意义上的一部分,但由cordova-cli创build的最新的默认应用程序默认会包含这个插件。

build立这个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进行testing