CODEWITHSUNDEEP
ionic-frameworkionic2ionic3
rchau
rchau

Reputation: 535

Image not displaying in img src in Ionic?

I am able to click photos in my phone but image not displaying on my page. I have installed the plugins from official ionic framework doc:

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

This is my code:

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

I have declared myPhoto:any; inside my class.

This is where I am showing my Image:

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

I don't know where I am doing the mistake. Please Help me. Thanks!

Upvotes: 1

Views: 931

Answers (1)

Rashmi ranjana
Rashmi ranjana

Reputation: 92

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

}

for 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>

Upvotes: 1

Related Questions