Question

我正在尝试使用离子应用程序中的相机插件加载图像，但是该图像未显示，并且未生成任何错误。这是我用来加载图像的打字稿代码：

import { ImagePicker } from '@ionic-native/image-picker/';

import { Camera, CameraOptions } from '@ionic-native/camera';

@Component({
  selector: 'page-profile',
  templateUrl: 'profile.html',
})
export class ProfilePage implements OnInit {

    public imageUri: string = '';

  constructor(
    public toast: ToastController,
    public navCtrl: NavController,
    public navParams: NavParams,
    public storage: Storage,
    public platform: Platform,
    public transfer: FileTransfer,
    private camera: Camera,
    public imagePicker: ImagePicker
  ) {

  }

    upload() {


    const options: CameraOptions = {
      quality: 100,
      targetWidth: 800,
      correctOrientation: true,
      destinationType: this.camera.DestinationType.FILE_URI,
      encodingType: this.camera.EncodingType.JPEG,
      mediaType: this.camera.MediaType.PICTURE,
      sourceType: this.camera.PictureSourceType.PHOTOLIBRARY
    }

    this.camera.getPicture(options).then((imageUri) => {
      this.imageUri = imageUri;
        this.toast.create({
        message: this.imageUri.toString(),
        closeButtonText: "Okay",
        dismissOnPageChange: true,
        showCloseButton: true
      }).present()
    }, (err) => {
      this.toast.create({
        message: err.toString(),
        closeButtonText: "Okay",
        dismissOnPageChange: true,
        showCloseButton: true
      }).present()
    });
 }

在html端，这是我显示图像的方式：

 <div class="profile-picture">
    <div class="image">
       <img [src]="imageUri.replace('file://','')" *ngIf="imageUri !== ''">                    
    </div>
    <p (click)="upload()" tappable style="width: 100%;">load  profil picture</p>
  </div>

因此，当用户选择图像时，该图像不会显示在视图中。我在用 cordova-plugin-ionic-webview“：” ^ 3.1.2

谢谢。

Answer 1

尝试这样的事情。

html：

  <img src="{{imgUrl}}" (click)="pickImage()" id="image">

ts：

public takePicture(sourceType) {
  // Create options for the Camera Dialog
  var options = {
   quality: 100,
   targetWidth: 80,
   targetHeight: 80,
   destinationType: this.camera.DestinationType.DATA_URL,
   sourceType: sourceType,
   correctOrientation: true
 };

// Get the data of an image
this.camera.getPicture(options).then((imagePath) => {
  this.prepareFile('data:image/jpeg;base64,' + imagePath);
}, (err) => {
  this.presentToast('Error while selecting image.');
})};



private prepareFile(namePath) {
 this.imgUrl = namePath;
}

sourceType是this.camera.PictureSourceType.PHOTOLIBRARY或http://this.camera.PictureSourceType.CAMERA

ionic 3：无法使用相机插件显示图像

1 个答案: