Ionic 2相機未顯示照片

我正在開發一款應該使用相機拍照的簡單應用程序。相機工作並拍攝照片。但是我無法顯示圖像。我得到一個空的灰色框。在這個框中應該出現圖片，而不是。任何人有任何想法？Ionic 2相機未顯示照片

編輯：當我在android模擬器上運行應用程序時，我可以拍照（內置android功能），並顯示在應用程序中。無論何時我通過Ionic View應用程序或在iOS模擬器中部署它，我都無法查看圖像。

編輯2：我可以在Android設備上運行應用程序。我認爲Ionic View應用程序有時會有點bug。

這裏是我的代碼：

<ion-header> 
    <ion-navbar> 
     <ion-title> 
      Contact 
     </ion-title> 
    </ion-navbar> 
</ion-header> 

<ion-content> 
    <button ion-button (click)="takePicture()">Take photo</button> 
    <button ion-button (click)="sendData()">Send</button> 
    <ion-card> 
     <ion-card-content> 
      <img [src]="base64Image" *ngIf="base64Image" /> 
     </ion-card-content> 
    </ion-card> 
</ion-content>

打字稿文件：

import {Component} from '@angular/core'; 
import {Camera} from 'ionic-native'; 


@Component({ 
    selector: 'page-contact', 
    templateUrl: 'contact.html' 
}) 
export class ContactPage { 

    public base64Image: string; 

constructor() { 

} 

takePicture() { 
    Camera.getPicture({ 
     destinationType: 0, 
     targetWidth: 1000, 
     targetHeight: 1000 
    }).then((imageData) => { 
     this.base64Image = "data:image/jpeg;base64," + imageData; 
    }, (err) => { 
     console.log(err); 
    }); 
} 
}

來源

2016-10-25 RSSD

改變你的第一個參數Getpicture中（）：

destinationType: Camera.DestinationType.DATA_URL,

編輯：離子視圖沒有按」用插件玩好。您可以做的唯一真正的測試是在設備上運行。我試過你的代碼，它在我的android手機上運行。

來源

2016-10-25 10:23:03 Dee

是的我已經在Android設備上測試過它，它工作。您建議的Camera.DestinationType.DATA_URL不適用於我。我收到一個錯誤，它是一個私人成員，因此無法訪問。 – RSSD

Camera.getPicture({ 
     destinationType: Camera.DestinationType.DATA_URL, 
     targetWidth: 1000, 
     targetHeight: 1000, 
     encodingType: Camera.EncodingType.JPEG, 
     sourceType: Camera.PictureSourceType.PHOTOLIBRARY, 
     allowEdit:true }).then((imageData)=>{ 

     this.images.push(imageData); 
    });

試試上面的代碼。它將在iOS模擬器中工作。

來源

2017-02-02 16:02:14 Pops

另外，關於iOs的離子視圖有一些問題。因此，請確保您在模擬器或iOs設備上測試您的代碼。 – Pops

Ionic 2相機未顯示照片

回答

相關問題