Show user image in img tag


#1

Hi I am developing simple application with Ionic2 and Angular2 but I have problem with images from user gallery. I can select image from gallery but after selection I don’t see this image in application (in my img tag). Any solution or advice?

This is my code using Image Picker plugin

Html:

<button (click)="openGallery()">Open gallery</button>
<img style="width: 200px; height: 200px; border: 1px red solid;" [src]="url"/>

TypeScript:

import { Component } from '@angular/core'; 
import { ImagePicker } from 'ionic-native';

@Component({
  templateUrl: 'item-details.html'
})
export class ItemDetailsPage {
  url: string;

  openGallery():void {
    ImagePicker.getPictures({}).then((results) => {
      console.log('selected image: ' + results[0]);
      this.url = results[0];
    }, (err) => {
      console.log(err);
    });
  }
}

Output from console:

selected image: file:///data/user/0/com.ionicframework.myionic2project610206/cache/tmp_IMG_20161113_165108713062002.jpg

I am running application on tablet with Android 6.0.1 and I am using command:

ionic run android -c -l

Cordova version:

λ cordova platform ls
Installed platforms:
android 6.0.0

Inside config.xml I have:

<access origin="*"/>

Ionic version:

λ ionic -v
2.1.8