Android Hybid 应用程序使用 Ionic 框架显示远程图像的问题? [英] Issue with Android Hybid app to display remote image with Ionic framework?

问题描述

我是 Ionic 的新手.我正在使用 Ionic 框架 (1.3.20)、Angular JS、Cordova 5.0.0

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

模板文件 browse.html 代码:

Template file browse.html code:

<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 在我的移动浏览器中显示图像.但图片没有出现在应用中.

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.

推荐答案

使用 cordova-plugin-whitelist 将域列入白名单a> 解决了这个问题.

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

通过 CLI 添加插件:

Add the plugin via CLI:

cordova plugin add cordova-plugin-whitelist

然后将以下代码行添加到您应用的 config.xml:

and then add the following line of code to your app's 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'">

这个问题的原因:

来自 Cordova 4.0.0 的 Android 更新:

From Cordova 4.0.0 for Android's update:

改进了白名单功能

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

• 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).

注意:虽然严格来说不是此版本的一部分，但最新的默认应用程序由cordova-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 应用程序使用 Ionic 框架显示远程图像的问题?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！