Ionic 2 相机照片未显示答案

【问题标题】：Ionic 2 Camera photo not showingIonic 2 相机照片未显示
【发布时间】：2017-03-07 03:46:55
【问题描述】：

我正在开发一个应该使用相机拍照的简单应用。相机工作并拍照。但是我无法显示图像。我得到一个空的灰色盒子。在这个框中应该出现图片，但它没有。有人知道吗？

编辑：当我在 android 模拟器上运行应用程序时，我可以拍照（内置 android 功能）并在应用程序中显示。每当我通过 Ionic View 应用程序或在 iOS 模拟器中部署它时，我都无法查看图像。

编辑 2：我可以在 Android 设备上运行该应用程序。我认为 Ionic View 应用程序有时会出现一些问题。

这是我的代码：

<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);
    });
}
}

【问题讨论】：

标签： typescript ionic-framework camera

【解决方案1】：

更改 getPicture() 中的第一个参数：

destinationType: Camera.DestinationType.DATA_URL,

编辑：离子视图不适合插件。您可以做的唯一真正的测试是在设备上运行。我试过你的代码，它在我的安卓手机上运行。

【讨论】：

是的，我也在 Android 设备上对其进行了测试，并且可以正常工作。您建议的 Camera.DestinationType.DATA_URL 对我不起作用。我收到一条错误消息，指出它是私有成员，因此无法访问。

【解决方案2】：

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 模拟器中运行。

【讨论】：

另外，iOs 上的 ionic 视图也存在一些问题。因此，请确保在模拟器或 iOs 设备上测试您的代码。