I can't display pictures from the gallery (V4)

Ionic Framework
1

Hi, I’m very new in angular/ionic and I’m trying to display the images that I select from the Gallery (android) but it’s not working. I can select the image, but when it turns to display it, it won’t do that. Can you help me see what’s wrong in here? I’ve seen a lot of pieces of code, and they’re always almost the same, but I can’t make it work, so my only option is to reach you guys.
Here’s my code:

async selectArchive() {
    const actionSheet = await this.actionSheetController.create({
      header: "Select Image Source",
      buttons: [{
        text: 'Import from Library',
        handler: () => {
          this.selectImage();
        }
      },
      {
        text: 'Camera',
        handler: () => {
          this.takePhoto();
        }
      },
      {
        text: 'Cancel',
        role: 'cancel'
      }
      ]
    });
    await actionSheet.present();
  }

takePhoto() {
    var options ={
    quality: 100,
    mediaType: this.camera.MediaType.PICTURE,
    destinationType: this.camera.DestinationType.DATA_URL,
    encodingType: this.camera.EncodingType.JPEG
  }
  this.camera.getPicture().then((imagedata) => {
    let filename = imagedata.substring(imagedata.lastIndexOf('/')+1);
    let path = imagedata.substring(0, imagedata.lastIndexOf('/')+1);
    this.file.readAsDataURL(path, filename).then((basic64data) => {
      this.images.push(basic64data);
      console.log(imagedata);
    })
  })

  }



  selectImage() {
    var options ={
    quality: 100,
    destinationType: this.camera.DestinationType.DATA_URL,
    sourceType: this.camera.PictureSourceType.PHOTOLIBRARY,
    saveToPhotoAlbum: false
  }
  this.camera.getPicture(options).then((imagedata) => {
    let filename = imagedata.substring(imagedata.lastIndexOf('/')+1);
    let path = imagedata.substring(0, imagedata.lastIndexOf('/')+1);
    this.file.readAsDataURL(path, filename).then((basic64data) => {
      this.images.push(basic64data);
      console.log(imagedata);
    })
  })

  }
2

If you’re very new, you might want to take this opportunity to get off of Cordova (which it looks like you’re using) in favor of Capacitor. Either way, it looks to me like you’re asking for a DATA_URL but then treating the result as if it were a FILE_URI. So I would either use the data url directly as the source, or ask for a FILE_URI and then try to read the file as you apparently are.

3

Thank you for replying.

I am getting this error: Error: Uncaught (in promise): FileError: {“code”:2,“message”:“SECURITY_ERR”}

Do you have any idea how to solve this problem?

Thank you for your time

4

In cordova you need to use this solution :-
https://devdactic.com/ionic-4-image-upload-storage/

1.You have to resolve the native path (using FilePath plugin)
2. Copy the file to app directory
3. Convert the File to Base64 using the File plugin’s method readAsDataURL
4. Display the image using src property.