Vấn đề với ứng dụng Android Hybid để hiển thị hình ảnh từ xa với khung Ionic?

Question

Tôi mới sử dụng Ionic. Tôi đang sử dụng Ionic Framework (1.3.20), góc JS, Cordova 5.0.0

tập tin Template đang browse.html:

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

app.js mã:

.state('app.browse', { 
    url: "/browse", 
    views: { 
     'menuContent': { 
     templateUrl: "templates/browse.html", 
     controller: 'Ctrl' 
     } 
    } 
    }) 

controller.js mã

.controller('Ctrl',function($scope) { 
     $scope.currentImage = 0; 
     $scope.availableImages = [ 
     { 
      src: "http://lorempixel.com/160/160/people/3" 
     } 
     ]; 
     console.log("reading image in controller !!!"); 
}) 

chi tiết Tiêu đề:

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 file:

<access origin="*"/> 

Lỗi trên console:

GET http://lorempixel.com/160/160/people/3 404 (Not Found) 

tôi xác nhận url http://lorempixel.com/160/160/people/3 đang hiển thị hình ảnh trong trình duyệt trên điện thoại di động của tôi. nhưng hình ảnh không xuất hiện trên ứng dụng.

Answer 1

Build plnkr này: http://plnkr.co/edit/GprtU3r8NDgYwO6jGRkp?p=preview

tập tin html của tôi:

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

Javascript:

$scope.currentImage = 0; 
$scope.availableImages = [{ 
    src: "http://lorempixel.com/160/160/people/3" 
}]; 

Dường như mọi thứ đều ổn ...
Thử nghiệm với angularjs 1.3.15

Answer 2

Đặt trước danh sách trắng nguồn điện sử dụng cordova-plugin-whitelist giải quyết vấn đề.

Thêm plugin thông qua CLI:

cordova plugin add cordova-plugin-whitelist 

và sau đó thêm dòng mã sau đây để config.xml của ứng dụng của bạn:

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

và

này meta thẻ trong index.html

của bạn 210

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

EDIT: Lý do cho vấn đề này:

Từ Cordova 4.0.0 cho cập nhật Android:

chức năng Whitelist được tân trang

• Bạn sẽ cần phải thêm các plugin cordova-plugin-whitelist mới để tiếp tục sử dụng một danh sách trắng

• Thiết lập một Content-An ninh -Policy (CSP) hiện được hỗ trợ và là cách được đề xuất cho danh sách trắng (xem chi tiết trong plugin readme)

• Yêu cầu mạng bị chặn theo mặc định witho ut plugin, do đó, cài đặt plugin này ngay cả để cho phép tất cả các yêu cầu, và ngay cả khi bạn đang sử dụng CSP.

• Danh sách trắng mới này được nâng cao để an toàn hơn và có thể định cấu hình hơn, nhưng hành vi Danh sách trắng cũ vẫn có sẵn qua một plugin riêng biệt (không được khuyến nghị).

Lưu ý: mặc dù không phải là một phần của bản phát hành này, ứng dụng mặc định mới nhất được tạo bởi cordova-cli sẽ bao gồm plugin này theo mặc định.