Image uploading but not displaying loading from gallery not working

Ionic Framework ionic-v3
1

below is my code …

public loadFromLibrary(sourceType, DestinationType) {

    var options = {
      quality: 100,
      sourceType: sourceType,
      destinationType: DestinationType,
      saveToPhotoAlbum: false,
      correctOrientation: true,
      mediaType: this.camera.MediaType.ALLMEDIA
      // allowEdit : true
    };
  

    // Get the data of an image
    this.camera.getPicture(options).then((imagePath) => {
      
       let data =  imagePath;
      alert(data); 
         this.imagePath1=imagePath;
        this.imageFileTransfer(data, "general_canvas");
    }, (err) => {
      this.presentToast(err);
      this.temp = false;
    });
  }

above alert is displaying like

/storage/emulated/0/DCIM/Camera/Img_Random_Number.jpg
2

Try this code below

public loadFromLibrary() {

    var options = {
      quality: 100,
      sourceType: this.camera.PictureSourceType.PHOTOLIBRARY,
      destinationType: this.camera.DestinationType.DATA_URL,
      encodingType: this.camera.EncodingType.JPEG,
      // saveToPhotoAlbum: false,
      correctOrientation: true
      // mediaType: this.camera.MediaType.ALLMEDIA
      // allowEdit : true
    };


    // Get the data of an image
    this.camera.getPicture(options).then((imageData) => {

      this.imagePath1 = imageData;
      this.imageFileTransfer(imageData, "general_canvas");
      this.image = 'data:image/jpeg;base64,' + imageData; //this image can be shown in html
    }, (err) => {
      this.presentToast(err);
      this.temp = false;
    });
  }

On html

<img [src]="image"/>
3

Hi @HugoPetla I tried your method its still not working displaying the default icon not image

4

Is this possible that because of permission its not coming because video is also displaying when loading from gallery but this image only not coming

5

@Nikhil_dhar123 I think that you need to have a look on Angular DomSanitizer https://angular.io/api/platform-browser/DomSanitizer

in you constructor inject this interface private domSanitizer: DomSanitizer

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

In your html template use this code


<img   [src]='domSanitizer.bypassSecurityTrustResourceUrl(image)'>
6

Hi @achaheen not working plz check below

this.camera.getPicture(options).then((path) => {
      let imageExtension=[".jpg",".png",".jpeg"];
      var mediaType=1;

      for(var i=0;i<imageExtension.length;i++){
        let temp=path.indexOf(imageExtension[i]);        
        if(temp>-1){
          mediaType=2;
          i=imageExtension.length;
        }
      }

      if (mediaType == 2) {
        let data = path;
        if (this.index == 1) {
          this.storeImagePath.push({ "src": 'data:image/jpeg;base64,' + data });
        }
      }

      else if (mediaType == 1) {
          this.storeVideoPath.push({ "src": path });           
      }
});

in html

 <ion-item *ngFor="let image of storeImagePath" class="col">
        <img [src]= "domSanitizer.bypassSecurityTrustResourceUrl(image.src)" (click)="openModal(image.src)"/>
      </ion-item>

here the storevideoPath is working fine but not image
video html

<ion-item *ngFor="let video of storeVideoPath" class="col">

        <video controls="controls" preload="metadata" autoplay="autoplay" webkit-playsinline="webkit-playsinline" class="videoPlayer">
          <source src= "{{video.src}}" type="video/mp4"/></video>      
              
      </ion-item>
7

@Nikhil_dhar123 Have you tried to run this in android emulator or iOS simulator ? If yes please try to add some debugging lines and share the logs.

8

yes I checked in android emulator and in my mobile also the path I am getting is like /storage/sdcard0/…/fname.jpg

9

I’ve a misunderstanding here, you are saving the image as base64 encoded but in the logs you are sharing the images are retrieved as file URL not a DATAURL, which means that there is something wrong with your options object.

As advised by @HugoPetla you must have destinationType as DATA_URL to get the captured images as base64 encoded.

10

hi @achaheen
hey in emulator its still not working dont know why but on mobile now its working …
ts

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

      this.imagePath1 = imageData;
      this.imageFileTransfer(imageData, "general_canvas");      
    }, (err) => {
      this.presentToast(err);
      this.temp = false;
    });

html

<img src = "{{imagePath1}}" />

thanks everyone