图像未显示在 Ionic 的 img src 中？答案

【问题标题】：Image not displaying in img src in Ionic?图像未显示在 Ionic 的 img src 中？
【发布时间】：2018-07-21 13:55:54
【问题描述】：

我可以点击手机中的照片，但图片没有显示在我的页面上。我已经从官方 ionic 框架文档中安装了插件：

$ ionic cordova plugin add cordova-plugin-camera
$ npm install --save @ionic-native/camera

这是我的代码：

 getPic()
  {
    const options: CameraOptions = {
      quality: 70,
      destinationType: this.camera.DestinationType.FILE_URI,
      encodingType: this.camera.EncodingType.JPEG,
      mediaType: this.camera.MediaType.PICTURE
    }

    this.camera.getPicture(options).then((imageData) => {         
     this.myPhoto = 'data:image/jpeg;base64,' + imageData;
    }, (err) => {         
    });
  }

我在课堂上声明了myPhoto:any;。

这是我展示图片的地方：

<ion-content no-bounce padding>   
<button ion-button (click)="getPic()">Take A Picture</button>
<p align="center"><img src="{{ myPhoto }}"></p>
</ion-content>

我不知道我在哪里做错了。请帮我。谢谢！

【问题讨论】：

标签： ionic-framework ionic2 ionic3

【解决方案1】：

 private OpenCamera(): void{
const options: CameraOptions = {
  quality: 50,
  destinationType: this.camera.DestinationType.FILE_URI,
  encodingType: this.camera.EncodingType.JPEG,
  mediaType: this.camera.MediaType.PICTURE,
  correctOrientation: true,
  sourceType: this.camera.PictureSourceType.CAMERA,
  saveToPhotoAlbum: true
}

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

  this.AddIssueObj.file.push(s);
  this.uploadcount=this.AddIssueObj.file.length;
}, (err) => {
  // Handle error
});

}

对于 HTML：

 <ion-scroll scrollX="true" class="m-slider__scroll" scroll-avatar>
          <span *ngFor="let v of photoList">
            <img src="{{v}}" alt="slider image1" class="m-slider__img" />
          </span>
        </ion-scroll>

【讨论】：

this.myphoto=imagedata;
非常感谢您的回答@Rashmi ranjana。但是请告诉我我的代码有什么问题？为什么它没有显示在我的页面中？我是否必须将this.myPhoto = 'data:image/jpeg;base64,' + imageData; 更改为this.myphoto=imagedata;
是的。如果对您有帮助，请点赞我的回答。我所经历的是你不能在 ionic 中显示 base64 图像。
是的，没错。我怎么做？如何显示那个 base64image？
您无法显示 base 64 图像。您需要将在 imagedata 中获得的本机路径。你需要在html中显示它。只需从 this.myPhoto = 'data:image/jpeg;base64,' + imageData; 更改您的代码到 this.myphoto=imagedata;