How to display an image from Ionic native image pi

Question

I'm using Ionic native image picker: https://ionicframework.com/docs/native/image-picker/

I'm importing on my module

import { ImagePicker } from '@ionic-native/image-picker';

And adding on the module's providers

ImagePicker,

On my page I'm importing it

import { ImagePicker, ImagePickerOptions } from '@ionic-native/image-picker';

Adding to my constructor

private imagePicker: ImagePicker,

Then calling a method on a button

async pickImageFromGallery() {
  try {
    const [imageSource] = await this.imagePicker.getPictures(this.pickerOptions);

    this.imgSrc = imageSource;

It does work and I can get the file URI, however when I try to display on an <img> tag the image doesn't show up

<img src="{{ imgSrc }}" alt="" />

Do I need to configure some permission or something? Why doesn't the image show up?

Answer 1

Instead of this.imgSrc = imageSource; I did

this.imgSrc = imageSource.replace('file://', '');

Works on both iOS and Android.

---

If you run into problems like Android crashing try this:

First I cleaned my project

# rm -rf
rimraf .sourcemaps node_modules platforms plugins www

Then installed packages

npm i

Then deploy the app again

ionic cordova run android --device

Answer 2

You have to add "" in your src

<img src="{{ imgSrc }}" alt="" />