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

IT技术 javascript angularjs cordova ionic hybrid-mobile-app
2021-01-26 10:34:10

我是 Ionic 的新手。我正在使用 Ionic 框架 (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'
      }
    }
  })

控制器.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)

我验证了 url http://lorempixel.com/160/160/people/3在我的移动浏览器中显示图像。但图像没有出现在应用程序上。

2个回答

使用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 创建的最新默认应用程序将默认包含这个插件。

这对我有用，除了对我来说release.apk这显然是一个真正的问题！我的应用程序已经在 App Store 中出现了这个问题:(
2021-03-21 10:34:10
是的，我做到了，但如果我没有看到你的帖子，我现在很可能已经把头发扯掉了。不过确实有道理。但只是对社区的建议很差。
2021-03-29 10:34:10
惊人！！我的问题是……Cordova 在 BGZUZ 中发生了什么？？？为什么突然需要这个？使用 ionic 已经超过 6 个月了，这会弹出
2021-03-31 10:34:10
您是否更新了项目的库？我已经根据原因编辑了我的答案。
2021-04-12 10:34:10
最好是cordova plugin add cordova-plugin-whitelist获得已发布的版本而不是最新的 github 代码
2021-04-13 10:34:10

构建这个 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测试

是的，这很奇怪，wamp，plnkr，Codepen 显示图像即将出现，但是当我使用“ionic run”在我的安卓手机中加载 apk 时，它为图像提供了 404。
2021-03-22 10:34:10
其它你可能感兴趣的问题
上一篇Ajax 调用到 MVC 控制器 - URL 问题 下一篇动态表单输入上的 jquery 验证插件不起作用