問題與Android Hybid應用程序顯示遠程圖像與Ionic框架？

我是Ionic的新手。我使用離子框架（1.3.20），角JS，科爾多瓦5.0.0問題與Android Hybid應用程序顯示遠程圖像與Ionic框架？

模板文件 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)

我驗證網址http://lorempixel.com/160/160/people/3正在我的手機瀏覽器中顯示圖像。但圖像不是在應用程序上。

來源

2015-04-28 Jyoti Prakash

這很奇怪。我只是在Codepen.io上試過了，它工作。您的應用程序是否具有互聯網權限？ – Keval

yes在AndroidManifest.xml中添加了這些權限 <使用權限android：name =「android.permission.ACCESS_WIFI_STATE」/> <使用權限android ：name =「android.permission.ACCESS_NETWORK_STATE」/> –

好的。嘗試安裝這個插件 - https://github.com/apache/cordova-plugin-whitelist並將''添加到您的** config.xml ** 。 – 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

來源

2015-04-28 07:51:32 Z3R0

是，這是奇怪的，WAMP，plnkr，Codepen顯示圖像快到了，但是當我使用「離子跑」了給404的圖像加載在我的Andorid手機的APK。 –

將白名單做主電源使用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'">

編輯：的原因針對此問題：

從科爾多瓦4.0。0 Android的更新：

白名單功能改組

您需要添加新的科爾多瓦 - 插件白名單的插件可以繼續使用白名單

設置一個內容安全 - 政策（CSP），現在支持，並加入白名單（見插件自述細節）的推薦方式

網絡請求默認阻止無覆蓋請使用插件，因此即使您使用CSP的甚至允許所有請求安裝此插件。

此新白名單已增強爲更安全且可配置，但Legacy白名單行爲仍可通過單獨的插件（不推薦）使用。

注意：在此版本中沒有嚴格的部分，由科爾多瓦-CLI創建最新的默認應用將包括該插件默認。

來源

2015-04-28 10:24:20 Keval

令人驚歎！我的問題是...... BGZUZ與科爾多瓦有什麼關係？爲什麼它突然需要這個？已經使用離子超過6個月，現在彈出 –

您是否更新了項目的庫？我已經根據理由編輯了我的答案。 – Keval

是的，我做過了，但如果我沒有看到你的帖子，我很可能現在已經把我的頭髮撕掉了。但它確實有意義。但只是很少建議社區。 –

問題與Android Hybid應用程序顯示遠程圖像與Ionic框架？

回答

相關問題