web-dev-qa-db-ja.com

Android Hybrid app with Remote image to display remote image with Ionic framework？

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)

私は、URL http://lorempixel.com/160/160/people/ がモバイルブラウザに画像を表示していることを確認しました。しかし、画像はアプリに表示されません。

javascriptangularjscordovaionichybrid-mobile-app
16
Jyoti Prakash

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'">

EDIT：この問題の理由：

Cordova 4.0.0 for Androidのアップデートから：

ホワイトリスト機能が刷新されました

  • ホワイトリストを引き続き使用するには、新しいcordova-plugin-whitelistプラグインを追加する必要があります

  • Content-Security-Policy（CSP）の設定がサポートされ、ホワイトリストへの登録に推奨される方法です（詳細はプラグインのreadmeを参照）

  • ネットワークリクエストはデフォルトでプラグインなしでブロックされるため、すべてのリクエストを許可する場合でも、CSPを使用している場合でも、このプラグインをインストールしてください。

  • この新しいホワイトリストは、より安全で構成可能なように拡張されていますが、レガシーホワイトリストの動作は、別のプラグインを介して引き続き使用できます（非推奨）。

注：このリリースに厳密には含まれていませんが、cordova-cliによって作成された最新のデフォルトアプリには、このプラグインがデフォルトで含まれています。

45
Keval

この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でテスト済み

0
Z3R0