Base64 image broken ios

Hi,

I have a probleme with diplaying base64 images.

When I upload an image from the camera in a base64 format i’m able to displays it via ionic devapp but when I build it from Xcode and run it natively on my ios device, the image is shown as a broken image.

Does somebody have an explanation?

Thanks!

Can you show a snippet of the code?

It seems it’s a path issue,
Pls check the path

@bandito

This is in my .ts file

private choosePicture() {
        const options = {
            quality: 100,
            destinationType: this.camera.DestinationType.DATA_URL,
            encodingType: this.camera.EncodingType.JPEG,
            mediaType: this.camera.MediaType.PICTURE,
            sourceType: 0,
            correctOrientation: true
        };

        this.camera.getPicture(options).then((imagePath) => {
            let base64Image = 'data:image/jpeg;base64,' + imagePath;

            let images = this.createClass.get('imagePath') as FormArray;
            images.push(new FormControl(base64Image));
        }, (err) => {
            if(err !== 'no image selected') {
                this.logError(err);
            }
        });
    }

And this is in my htlm

<ion-col col-6 col-md-4 col-xl-3 *ngFor="let image of createClass.controls['imagePath'].value; let i = index">
     <img src="{{ image }}"/>
</ion-col>

Hi this is a common problem. Just adding a comment so I can check my code just now on my PC and show you how I solved it

Sorry for the late reply.

If you have too much images in one web page it will get slower as the amount of images add because a base64 data has a lot of characters. Use FILE_URL because it will bring back a path of the image in the app directory.

Use ionic webview for that purpose:

In iOS you will have to copy it from the /tmp/ to another directory because everytime you close the app iOS will juse delete the contents of the folder. Just copy the file to dataDirectory.

Use the https://ionicframework.com/docs/native/file in order to do that.

==========

I had to reread your code because I don’t see what you’re trying to do. If what you are trying to do is make an array of images why not just add it into an property of an array called images?

import { WebView } from '@ionic-native/ionic-webview/ngx';


private images = [];

constructor( private webview, yadayadayada){}

private choosePicture() {
        const options = {
            quality: 100,
            destinationType: this.camera.DestinationType.FILE_URL,
            encodingType: this.camera.EncodingType.JPEG,
            mediaType: this.camera.MediaType.PICTURE,
            sourceType: 0,
            correctOrientation: true
        };

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

            const image = this.webview.convertFileSrc(imagePath)

            this.images = [...this.images, image];
           });
    }