Display image from device

Ionic Framework ionic-v3
1

Hi there,
I am trying to display an image after getting it from the imagePicker plugin, but cannot make it work.
The image uri in iOS is like “/var/mobile/containers/Data/blablabla/…jpg”.
Is that even possible to use it with an img tag? or is it necessary to convert it to Base64 first?
Probably a noob question but I did some research and did not find a clear answer.

Thank you!

2

In my app, I have used both ways (normal src image path and base64 like (‘data:image/jpg;base64,’ + response.content)), and both work.

Have you tried inspecting the HTML to check if the image src attribute path is correct?
If it is correct, try copying it and open that path in browser to check if image opens correctly.

3

Make sure your options have destinationType: this.camera.DestinationType.FILE_URI

let options = {
 maximumImagesCount: 5,
  sourceType: this.camera.PictureSourceType.PHOTOLIBRARY,
  destinationType: this.camera.DestinationType.FILE_URI,
  encodingType: this.camera.EncodingType.JPEG,
  targetHeight: 1000,
  targetWidth: 1000,
   quality: 100,
   correctOrientation: true
  
};

 this.imagePicker.getPictures(options).then((results) => {

   for (let i = 0; i < results.length; i++) {
        let theResult = results[i];    
    
     this.itemArray.push(theResult)
      
   }
 },

Here’s how I have my HTML set up. Ignore the async, and basically everything aside from

<img [src]="img.value" />

You would want to leave it at

<img [src]="img" />

The rest I pasted just in case you get any ideas for what you’re up to from it.

<ion-card *ngFor="let img of itemArray | async; let i = index">
    <ion-card-content>
    <img [src]="img.value" alt="Not Available" imageViewer/>
    </ion-card-content>
     <footer>
      {{img.notes}}
       </footer>
    <div class="chipGroup">
    <ion-chip [hidden]="checker[0]">
     <button ion-button outline icon-only (click)="addKeyword(img, i)" ><ion-icon name="key"></ion-icon></button>
       <ion-label>Keyword</ion-label>
    </ion-chip>
    <ion-chip [hidden]="checker[0]" >
      <button ion-button outline icon-only (click)="addNotes(img, i)"><ion-icon name="paper"></ion-icon></button>
      <ion-label>Notes</ion-label>
    </ion-chip>
    <ion-chip id="rightChip">
       <button ion-button outline icon-only (click)="deleteImage(img, i)" > <ion-icon name="remove" ></ion-icon></button>   
       <ion-label>Delete</ion-label>
       
    </ion-chip>
    </div>  
  </ion-card>
4

Thank you for your help, I actually could open safari in developer mode and find there was a problem.
:slight_smile:

5

Thanks for your help. My problem was actually with the imagePicker plugin, rather than the camera. The imagePicker does not have the option you were talking about. But thanks!

6

It’s what I’m using in my app. Literally, ImagePicker. Works great.

image3
image3480×640 53.1 KB
image6
image6480×640 47.7 KB

let options = {
 maximumImagesCount: 5,
  sourceType: this.camera.PictureSourceType.PHOTOLIBRARY,
  destinationType: this.camera.DestinationType.FILE_URI,
  encodingType: this.camera.EncodingType.JPEG,
  targetHeight: 1000,
  targetWidth: 1000,
   quality: 100,
   correctOrientation: true
  
};
 this.imagePicker.getPictures(options).then((results) => {


 let passArray = [];

   for (let i = 0; i < results.length; i++) {
        this.imgSrc = results[i];    
         let pic = ({
           value: this.imgSrc,
           deleted: false,
           keywords: []
         })  
         passArray.push(pic);
    
      
   }
    this.dataPage.pushImages(passArray);
 },
 (err) => {
  
  })
}