如何从Ionic原生图像选择器显示图像？ [英] How to display an image from Ionic native image picker?

问题描述

我正在使用Ionic原生图像选择器： https://ionicframework.com/docs / native / image-picker /

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

我正在我的模块上导入

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

并添加模块的提供商

ImagePicker,

在我的页面上我正在导入它

On my page I'm importing it

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

添加到我的构造函数

private imagePicker: ImagePicker,

然后在按钮上调用方法

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

    this.imgSrc = imageSource;

它确实有效，我可以获取文件URI，但是当我尝试在<$上显示时c $ c>< img> 标记图片未显示

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?

推荐答案

而不是 this.imgSrc = imageSource; 我做了

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

适用于iOS和Android。

Works on both iOS and Android.

如果遇到像Android崩溃这样的问题，试试这个：

If you run into problems like Android crashing try this:

首先我清理了我的项目

# rm -rf
rimraf .sourcemaps node_modules platforms plugins www

然后安装包

npm i

然后再次部署应用程序

ionic cordova run android --device

这篇关于如何从Ionic原生图像选择器显示图像？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！