truy cập hình ảnh địa phương với Ionic 2 Native trên iOS

Question

Tôi đang sử dụng ion 2 mẹ đẻ ImagePicker Plugin

ImagePicker.getPictures({ 
    maximumImagesCount: 1 
}).then((results) => { 
    vm.sourcePath = results[0] 
    console.log(vm.sourcePath) 
    // file:///Users/aymanjitan/Library/Developer/CoreSimulator/Devices/E937952F-7FAA-4DBB-8E23-80B04F3B6C72/data/Containers/Data/Application/FCF9097F-67BD-4DAD-AE30-D2F1839C0374/tmp/cdv_photo_003.jpg 
}) 

Bây giờ tôi đang cố gắng để truy cập vào hình ảnh này sử dụng thuộc tính image src

<img [src]='sourcePath' /> 

hoặc thậm chí cứng mã hoá đường dẫn

<img src="file:///Users/aymanjitan/Library/Developer/CoreSimulator/Devices/E937952F-7FAA-4DBB-8E23-80B04F3B6C72/data/Containers/Data/Application/FCF9097F-67BD-4DAD-AE30-D2F1839C0374/tmp/cdv_photo_003.jpg" 

nhưng không hiển thị gì.

biết rằng

<apan>{{sourcePath}}</apan> 

hiển thị đường dẫn chính xác!

tôi đã cố gắng sử dụng ion có nguồn gốc File plugin để chuyển đổi hình ảnh sang base64

var sourceDirectory = vm.sourcePath.substring(0, vm.sourcePath.lastIndexOf('/') + 1); 
var sourceFileName = vm.sourcePath.substring(vm.sourcePath.lastIndexOf('/') + 1, vm.sourcePath.length); 
File.readAsArrayBuffer(sourceDirectory, sourceFileName).then((fileData)=> { 
    console.log(fileData) 
},() => { 
    console.log('error') 
}) 

nhưng đó ném một lỗi

Tôi đã thêm các quy tắc danh sách trắng trong config.xml tôi

<access origin="*"/> 
<allow-navigation href="*"/> 
<allow-navigation href="file://*/*"/> 

và vẫn không có may mắn

Tôi có thể là đường dẫn tập tin eturned là không đúng vì vậy tôi đặt nó trong trình duyệt của tôi, và nó cho thấy các hình ảnh được chọn vì nó nên

vậy làm thế nào tôi có thể truy cập hình ảnh địa phương với ion 2 trên iOS (9,3)

Answer 1

Một cách giải quyết cho giải pháp theo đề xuất của author trong số link này có thể được thực hiện dưới dạng

Với $cordovaFile.readAsDataUrl(„file:///...“, „myPic.png“) bạn có thể yêu cầu nội dung của tệp.

Trong View <img src=“{{ imgSrc }}“ />

Trong controller

$cordovaFile.readAsDataUrl(„file:///...“, „myPic.png“).then(
function(res) { $scope.imgSrc = res; }, 
function(error) { alert(damn!‘); } 
); 

Và trong config.xml

<allow-navigation href="*"/> 
<allow-navigation href="file://*/*" /> 
<allow-intent href="*"/> 
<access origin="*"/> 

Tiếp theo là tập tin của bạn index.html

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

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 trang nội dung Chính sách bảo mật (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 a bị chặn theo mặc định mà không cần plugin, vì vậy hãy 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 thông qua một plugin riêng biệt (không được khuyến nghị).

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

Fill ghi công đi vào này thread và các liên kết và các tác giả trong đó đề cập ở trên