Reputation: 100331
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?
Upvotes: 1
Views: 2331
Reputation: 100331
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
Upvotes: 3
Reputation: 1163
You have to add "" in your src
<img src="{{ imgSrc }}" alt="" />
Upvotes: 0