Can't display image from gallery

Ionic Native
1

I have an app that allows a user to select a photo from the gallery or take a photo via camera. I am trying to display an image that was taken via camera and it works fine, But when i loading image from gallery. it give unreadable path like

content://com.android.providers.media.documents/document/image%3A28854

my ionic info

ionic (Ionic CLI) : 4.6.0
Ionic Framework : ionic-angular 3.9.2
@ionic/app-scripts : 3.2.2

Also another developer posted same question in ionic native

https://forum.ionicframework.com/t/display-image-from-gallery/154681

Please help to reslove this issue.

Thanks in advance

2

I already solved it with the use of DOMSanitizer :blush:

1 Like
3

Here are some snippets that could possible help you :slight_smile:

Typescript

import { DomSanitizer } from '@angular/platform-browser'; 

constructor(public domSanitizer: DomSanitizer) { }

HTML

<img [src]="domSanitizer.bypassSecurityTrustUrl(image)"">

Hope it works on you too :blush:

Hereā€™s a reference link: https://devfanaticblog.com/working-with-camera-in-ionic-2-and-ionic-native/

1 Like
4

Thanks for your reply OliverPrimo.
But still iā€™m facing same issue

Here my code

TypeScrpit

getImage() {

    const options = {
        quality: 60,
        sourceType: this.camera.PictureSourceType.PHOTOLIBRARY,
        destinationType: this.camera.DestinationType.FILE_URI,
        encodingType: this.camera.EncodingType.JPEG,
        mediaType: this.camera.MediaType.PICTURE,
        saveToPhotoAlbum: true
    }

    this.camera.getPicture(options).then((imagePath) => {
      console.log(imagePath);
        let base64Image = 'data:image/jpeg;base64,' + imagePath;
       this.pickImage = imagePath;
   
    }, (err) => {
        // Handle error
    });
}

Html

                <ion-col>
                    <img [src]="domSanitizer.bypassSecurityTrustUrl(pickImage)">
                </ion-col>
5

Iā€™m sorry but I donā€™t really know whatā€™s exactly the problem on your case but we have the same codes tho :thinking:

I just imported DomSanitizer and got this to work.

1 Like
6

I am also in same state. :roll_eyes:

My app ionic info:

Ionic:

ionic (Ionic CLI) : 4.6.0
Ionic Framework : ionic-angular 3.9.2
@ionic/app-scripts : 3.2.2

Cordova:

cordova (Cordova CLI) : 8.0.0
Cordova Platforms : android 7.0.0, browser 5.0.4
Cordova Plugins : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 3.1.1, (and 10 other plugins)

System:

(C:\Program Files (x86)\Android\android-sdk)
NodeJS : v8.11.1 (C:\Program Files\nodejs\node.exe)
npm : 5.6.0
OS : Windows 10

Can u guess any issues ?

7

Hello @krupa_rk, did you solve your problem?

8

No @OliverPrimo, Currently trying to downgrade plugin versions. camera.DestinationType.FILE_URI alone not working.

9

does camera.DestinationType.FILE_URI causes the problem?

I thought this one was the root of your problem.

const options = { // should be const options: CameraOptions = {
        quality: 60,
        sourceType: this.camera.PictureSourceType.PHOTOLIBRARY,
        destinationType: this.camera.DestinationType.FILE_URI,
        encodingType: this.camera.EncodingType.JPEG,
        mediaType: this.camera.MediaType.PICTURE,
        saveToPhotoAlbum: true
    }

but Iā€™m not sure tho. If downgrading your plugins solved the problem then maybe you did the right choice.

10

Hi i have an app that select a photo from the gallery and this is my code, i hope this helps you.

File .ts:

const options: CameraOptions = {
quality: 100,
destinationType: this.camera.DestinationType.DATA_URL,
sourceType: this.camera.PictureSourceType.PHOTOLIBRARY,
saveToPhotoAlbum:false
}

this.camera.getPicture(options).then((ImageData) => {
this.mifoto = ā€˜data:image/jpeg;base64,ā€™ + ImageData;

}, (error) =>{
console.error( error );
});

}

Html:

< div class=ā€œfotoā€><img [src]=ā€œmifotoā€ *ngIf=ā€œmifotoā€ />

11

Thanks for your reply @asedio. actually my app will be connected with mongoDB. So i dont know whether Data_URL accepted to transfer photo . If you know any solution that may helpful for me

12

"CameraOptions " it is also not working @OliverPrimo. :no_mouth: