Image not displaying in img src in Ionic?

Ionic Framework ionic-v3
1

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!

2

Hello,

If imageData is valid, maybe string interpolation thread our imagaData. For example you can not use string interpolation for inserting html, script, etc… because html will escaped.

Try property binding [scr]=myPhoto

Btw: Imho in principle for any non-string data using property binding is the better way, for example booleans.

Best regards, anna-liebt

1 Like
3

It worked when I removed 'data:image/jpeg;base64,'. Now it is displaying.
But when I select photos from gallery, it is not displaying.

 selectPic(sourceType:number)
  {
    const options: CameraOptions = {
      quality: 50,
      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((imageData) => {

      this.myPhotoOne = 'data:image/jpeg;base64,' + imageData;
    }, (err) => {
      // Handle error
    });
  }

And calling in front-end using below code:

<button ion-button (click)="this.selectPic(0)">Picture from Gallery</button>
<p align="center"><img src="{{ myPhotoOne }}"></p>

Then again it is not loading. I don’t know when I take Pic from camera it is displaying in img src but when selecting from gallery it is not displaying. I tried both way i.e. by adding 'data:image/jpeg;base64,' and without adding the same.

4

Hello,
If I see it correct your code returns, as set in options, in both cases a file uri and not base64 encoded data. So maybe your additional adding of 'data:image… to imagedata cause the problem.

Best regards, anna-liebt

edit: console.log your data.

5

But when I remove it('data:image/jpeg;base64,') then also it is not showing. I modified the code to this but this also not working:

selectPic()
  {
    const options: CameraOptions = {
      quality: 50,
      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((imageData) => {
      this.myPhotoOne = imageData;
    }, (err) => {
      // Handle error
    });
  }

And calling with this:

<button ion-button (click)="selectPic()">Picture from Gallery</button>
<p align="center"><img src="{{ myPhotoOne }}"></p>

I am able to select photos but that image is not displaying in Img src

6

Hello,

try to set in options to base64.

Log what myPhotoOne contains.

Best regards, anna-liebt

7

When I put an alert I am getting:
unsafe:content://media/external/images/1224

8

Hello,

this is a fileurl.
Change your DestinationType to DATA_URL. That should return a base64 encoded string.

Also change to [src]=myPhotoOne to prevent problems coming from string interpolation.

Log again.

Best regards, anna-liebt

1 Like
9

Thank you very much @anna_liebt. That resolved my issue.

10

Hello,
good to hear.
Maybe getting the image as base64 encoded leads to problems with memory consumption.

So you could start a new thread, why and, most of all, how to prevent, that fileurl is unsafe.

Best regards, anna-liebt