Question

我拍了一张照片，我会在列表中的离子项目中显示图片。

photo.ts：

@IonicPage()
@Component({
  selector: 'page-photo',
  templateUrl: 'photo.html',
})
export class PhotoPage {

  public base64Image: string;

  constructor(
    private camera: Camera
  ) {
  }

  takePicture(){
    this.camera.getPicture({
      quality: 100,
      destinationType: this.camera.DestinationType.DATA_URL,
      encodingType: this.camera.EncodingType.JPEG,
      mediaType: this.camera.MediaType.PICTURE,
      correctOrientation: true

    }).then((imageData) => {

        this.base64Image = "data:image/jpeg;base64," + imageData;

    }, (err) => {
        console.log(err);
    });
  }

}

和photo.html

<ion-content padding>
  <ion-list>

    <ion-item>
      <ion-label fixed>Comment</ion-label>
      <ion-input type="text"></ion-input>
    </ion-item>

    <ion-item>
      <ion-label fixed>Picture</ion-label>
    </ion-item>

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

  </ion-list>

  <button ion-button (click)="takePicture()" block>Take a picture</button>

</ion-content>

请注意离子项标签中的img标签。

这样，拍照后，它会正确显示图片，但如果我将标签图片后的img标签放在ion-item中，则不会显示任何一张图片。要清除，我的模板将变为：

<ion-content padding>

  <ion-list>

    <ion-item>
      <ion-label fixed>Comment</ion-label>
      <ion-input type="text"></ion-input>
    </ion-item>

    <ion-item>
      <ion-label fixed>Picture</ion-label>
      <img [src]="base64Image" *ngIf="base64Image" />   -->  _here the difference_
    </ion-item> 

  </ion-list>

  <button ion-button (click)="takePicture()" block>Take a picture</button>

</ion-content>

它不起作用，我不知道为什么。

注意：如果我使用ion-img标签，它不会像img标签一样工作

Answer 1

"<ion-label>
 <ion-img  src=".."></ion-img>
</ion-label>
<ion-input></ion-input>"

Answer 2

我遇到了同样的问题，对我来说，至少对于V3，图像必须位于离子标签内，例如：

onResume

Answer 3

试试这个

<强> <ion-img src="..."></ion-img>

标签img在离子项中不起作用

3 个答案: