来自画廊的图像未显示在 ionic 2 的 img 标签上 [英] Image from gallery not displaying on img tag in ionic 2

问题描述

我正在尝试将图像从图库显示到 img 标记.但图像未显示在 img 标记上.但它正在使用 PhotoViewer .下面是我的代码.

I am trying to display image from gallery to img tag. But image not showing on img tag. But it is working with PhotoViewer . below is my code.

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

使用

this.camera.getPicture(this.options).then((imageData) => {

  alert(imageData)
  this.photoViewer.show(imageData);
  this.captureDataUrl=imageData;

 }, (err) => {
  // Handle error
 });

在 HTML 中

<img [src]="captureDataUrl" *ngIf="captureDataUrl"/>

如果我使用 sourceType 作为相机(sourceType: this.camera.PictureSourceType.CAMERA)，它也可以工作，它会在 img 标签上显示图像，但如果我使用 sourceType 作为 <代码>sourceType:this.camera.PictureSourceType.PHOTOLIBRARY.请帮忙

If I am using sourceType as camera (sourceType: this.camera.PictureSourceType.CAMERA),it also working,it displays image on img tag, But not working on if i use sourceType as sourceType: this.camera.PictureSourceType.PHOTOLIBRARY . Please help

推荐答案

你好，在ios也有同样的问题，我通过执行以下步骤解决了这个问题

Hi have the same problem in ios, I resolve this problem by doing the following step

            var options = {
                  quality: 80,
                  allowEdit: true,
                  sourceType: this.camera.PictureSourceType.CAMERA,
                  saveToPhotoAlbum: false,
                  correctOrientation: true,
                  encodingType: this.camera.EncodingType.JPEG,
                  destinationType: this.camera.DestinationType.FILE_URI
                  //encodingType: this.camera.EncodingType.PNG,
                };


                this.camera.getPicture(options).then((imagePath) => {
                      // Special handling for Android library  // 
                      if (this.platform.is('ios')) {
                        this.ImageData = imagePath.replace(/^file:///, '');
                      }
                      else {
                        this.ImageData = imagePath;
                      }
                      this.photos.push(this.ImageData); //if you have to show multiple image
                      this.photos.reverse();
            }

HTML部分

<ion-row>
    <ion-col col-3 *ngFor="let photo of photos; let id = index">
                    <ion-card class="block">
                      <ion-icon name="ios-close-circle-outline" class="deleteIcon" (click)="deletePhoto(id)"></ion-icon>
                      <img [src]="photo" *ngIf="photo" />
                    </ion-card>
    </ion-col>
</ion-row>

这篇关于来自画廊的图像未显示在 ionic 2 的 img 标签上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！