问题与Android Hybid应用程序，以显示与离子框架远程图像？ [英] Issue with Android Hybid app to display remote image with Ionic framework?

问题描述

我是新来的离子。
我使用的离子型框架（1.3.20），角JS，科尔多瓦5.0.0

I am new to Ionic. I am using Ionic Framework (1.3.20), Angular JS, Cordova 5.0.0

模板文件 browse.html code：

Template file browse.html code:

<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'
      }
    }
  })

controller.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

的Config.xml 文件：

  <access origin="*"/>

错误在控制台上：

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

我验证的网址 http://lorempixel.com/160/160/people/3 是展示图像在我的手机浏览器。但图像是不来的应用程序。

I verified the url http://lorempixel.com/160/160/people/3 is showing image in my mobile browser. but the image is not coming on the app.

推荐答案

使用科尔多瓦 - 插件白名单<白名单域/一>解决了问题。

Whitelisting the domains using cordova-plugin-whitelist solves the issue.

通过CLI添加插件：

cordova plugin add cordova-plugin-whitelist

然后code的下面一行添加到您的应用程序的 config.xml中

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

和

本元标记中的 index.html的

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

编辑：的原因针对此问题：

从科尔多瓦4.0.0用于Android的更新：

From Cordova 4.0.0 for Android's update:

白名单功能改组

  

• 您将需要添加新的科尔多瓦 - 插件白名单插件来继续使用白名单

• You will need to add the new cordova-plugin-whitelist plugin to continue using a whitelist

设置内容安全性策略（CSP），现在支持，并加入白名单（见插件自述详细信息）的推荐方式

Setting a Content-Security-Policy (CSP) is now supported and is the recommended way to whitelist (see details in plugin readme)

网络请求被阻止在默认情况下没有插件，所以即使安装这个插件，允许所有的请求，即使你是
  使用CSP。

Network requests are blocked by default without the plugin, so install this plugin even to allow all requests, and even if you are using CSP.

这新的白名单增强，更加安全和可配置的，但传统的白名单的行为通过单独的仍然是可用
  插件（不推荐）。

This new whitelist is enhanced to be more secure and configurable, but the Legacy whitelist behaviour is still available via a separate plugin (not recommended).

请注意：在此版本中没有严格的一部分，最新的默认应用
  通过科尔多瓦-CLI创建将包含此插件默认情况下。

Note: while not strictly part of this release, the latest default app created by cordova-cli will include this plugin by default.

这篇关于问题与Android Hybid应用程序，以显示与离子框架远程图像？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！