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

我是爱奥尼亚的新手。 我使用的是Ionic框架（1.3.20）、Angular JS和Cordova 5.0.0

模板文件browse.html代码：

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

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

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

Config.xml文件：

  <access origin="*"/>

我验证了url是否在我的移动浏览器中显示图像。但应用程序上没有图像。

构建此plnkr：

我的html文件：

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

似乎一切都很好……

---

使用angularjs 1.3.15进行测试，使用白名单列出域解决了问题

通过CLI添加插件：

cordova plugin add cordova-plugin-whitelist

然后将以下代码行添加到应用程序的config.xml：

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

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

编辑：此问题的原因：

来自Cordova 4.0.0的Android更新：

修改了白名单功能

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

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

• 默认情况下，网络请求在没有插件的情况下会被阻止，因此即使允许所有请求，也要安装此插件 使用CSP

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

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

---

这很奇怪。我刚在Codepen.io上试用过，效果不错。您的应用程序是否具有internet权限？是，在AndroidManifest.xml中添加了这些权限。好的。尝试安装此插件-并将

添加到config.xml。

（从缓存）

。。。你尝试过清理你的应用缓存吗？谢谢@Keval它工作得很好：）是的，这很奇怪，wamp，plnkr，Codepen显示图像即将出现，但是当我在我的andorid手机中使用“ionic run”加载apk时，它为图像提供了404。太棒了！！我的问题是…科尔多瓦到底怎么了？？？为什么突然需要这样做？已经和爱奥尼亚合作6个多月了，这是你更新项目库了吗？我编辑了我的答案，并说明了原因。是的，我编辑过，但如果我没看到你的帖子，我现在很可能已经把头发扯下来了。然而，这是有道理的。但是对社区的建议很差。最好做

cordova plugin添加cordova plugin白名单

，这样你就可以得到一个发布版本而不是最新的github代码这对我来说很有效，除了在我的

发布版上。apk

这显然是一个真正的问题！已将我的应用程序存在于应用商店中，并出现此问题：(

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

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