Ionic3 ionic cordova:当我从filechooser插件获取content://url时,如何在android gallery的img标签中显示图像

Ionic3 ionic cordova:当我从filechooser插件获取content://url时,如何在android gallery的img标签中显示图像,ionic3,cordova-plugins,cordova-android,Ionic3,Cordova Plugins,Cordova Android,我浪费了6天(而且还在数)的时间,在android上用ionic3 cordova显示gallery中的图像 this.fileChooser.open() .then((uri) => { console.log('image uri is', uri); }) 我不能直接使用uri绑定到标记的src 我尝试使用另一个插件并获取一个文件条目 return this.file.resolveLocalFilesystemUrl(uri); 我也不能用那个。。。

我浪费了6天(而且还在数)的时间,在android上用ionic3 cordova显示gallery中的图像

this.fileChooser.open()
  .then((uri) => {
    console.log('image uri is', uri);

  })
我不能直接使用
uri
绑定到标记的src

我尝试使用另一个插件并获取一个文件条目

return this.file.resolveLocalFilesystemUrl(uri);    
我也不能用那个。。。不安全的uri

然后我使用了
this.domSanitizer.bypassSecurityTrustUrl(entry.toInternalURL())

我也不能用它来绑定imgsrc

我不理解获取uri的意义,转换为另一个uri是为了安全,然后再转换为另一个uri是为了更安全。。但仍然无法达到目的

除了挫败感,请帮助我如何将html img标签的src绑定到这个不断变化的cordova-ionic角度世界中从图库中选择的图像。。一个学期前回答的博士/问题已经过时了

我在index.html中添加了cdvfile:in内容安全策略标记

我像这样用html绑定img标记

<img class="profile-img" [src]="imageSrc" />
我的信息是

cli packages: (---\AppData\Roaming\npm\node_modules)

    @ionic/cli-utils  : 1.19.2
    ionic (Ionic CLI) : 3.20.0

global packages:

    cordova (Cordova CLI) : 8.0.0

local packages:

    @ionic/app-scripts : 3.1.9
    Cordova Platforms  : none
    Ionic Framework    : ionic-angular 3.9.2

System:

    Android SDK Tools : 26.1.1
    Node              : v9.2.0
    npm               : 5.8.0
    OS                : Windows 7
mypackage.json内容是

"dependencies": {
    "@angular/animations": "6.0.1",
    "@angular/cli": "^6.0.1",
    "@angular/common": "6.0.1",
    "@angular/compiler": "6.0.1",
    "@angular/compiler-cli": "^6.0.1",
    "@angular/core": "6.0.1",
    "@angular/forms": "6.0.1",
    "@angular/http": "6.0.1",
    "@angular/platform-browser": "6.0.1",
    "@angular/platform-browser-dynamic": "6.0.1",
    "@ionic-native/camera": "^4.7.0",
    "@ionic-native/core": "^4.7.0",
    "@ionic-native/date-picker": "^4.7.0",
    "@ionic-native/file": "^4.7.0",
    "@ionic-native/file-chooser": "^4.7.0",
    "@ionic-native/geolocation": "^4.7.0",
    "@ionic-native/google-maps": "^4.8.2",
    "@ionic-native/network": "^4.7.0",
    "@ionic-native/splash-screen": "^4.7.0",
    "@ionic-native/status-bar": "^4.7.0",
    "@ionic-native/streaming-media": "^4.7.0",
    "@ionic-native/transfer": "^3.14.0",
    "@ionic-native/video-editor": "^4.7.0",
    "@ionic/storage": "^2.1.3",
    "@types/google-maps": "^3.2.0",
    "cordova-android": "7.1.0",
    "cordova-plugin-camera": "^4.0.3",
    "cordova-plugin-datepicker": "^0.9.3",
    "cordova-plugin-device": "^2.0.2",
    "cordova-plugin-file": "^6.0.1",
    "cordova-plugin-file-transfer": "^1.7.1",
    "cordova-plugin-filechooser": "^1.0.1",
    "cordova-plugin-geolocation": "^4.0.1",
    "cordova-plugin-googlemaps": "^2.3.1",
    "cordova-plugin-ionic-keyboard": "^2.0.5",
    "cordova-plugin-ionic-webview": "^1.1.19",
    "cordova-plugin-splashscreen": "^5.0.2",
    "cordova-plugin-statusbar": "^2.4.2",
    "cordova-plugin-streaming-media": "^1.0.2",
    "cordova-plugin-video-editor": "^1.1.3",
    "cordova-plugin-whitelist": "^1.3.3",
    "ionic-angular": "3.9.2",
    "ionicons": "3.0.0",
    "rxjs": "^6.0.0",
    "rxjs-compat": "^6.1.0",
    "sw-toolbox": "3.6.0",
    "zone.js": "0.8.26"
  }

非常感谢您的帮助

我通过ImagePicker获得了帮助。我是这样做的

在TS文件中:

import { File, FileEntry } from '@ionic-native/file';
import { DomSanitizer } from '@angular/platform-browser';
import { ImagePicker } from '@ionic-native/image-picker';  

...

    constructor(
        ...
        private file: File,
        private domSanitizer: DomSanitizer,
        private imagePicker: ImagePicker
    ) { }

    ...

    getImageFromGallery() {
        return this.imagePicker.getPictures({
            maximumImagesCount: 1
        })
        .then((results) => {
            return this.file.resolveLocalFilesystemUrl(results[0]);
        })
        .then((entry0: FileEntry) => {
            this.imageSrc = this.domSanitizer.bypassSecurityTrustUrl(entry0.toInternalURL());
        })
        .catch((err) => {
            console.log('failed to get image', err);
        });
    }

HTML是

请试试@JoeriShoeby,我已经试过了。在所有这些之后,我被控制台日志
GET中的一行毫无头绪的代码困住了cdvfile://localhost/content/com.android.providers.media.documents/document/image%3A4350:1 得到cdvfile://localhost/content/com.android.providers.media.documents/document/image%3A4350 0()
我不明白那是什么
0()
在该错误中的意思可能是使用
绕过SecurityResourceUrl
方法,但我不知道如何使用
normalizeURL
。然后我尝试了
ImagePicker
,如果你能找到一种直接的方法,它就可以工作了,或者这是唯一可以应用的黑客。我也面临同样的问题。如果您也在config.xmlyes中添加了,那么我添加了cdvfile:*当时。。不起作用。ImagePicker工作了,我从未回头看ImagePicker是否允许我们定义目录路径以获取所有照片?在我的例子中,我将图像存储在Android/data/app.folder/files/Download中
import { File, FileEntry } from '@ionic-native/file';
import { DomSanitizer } from '@angular/platform-browser';
import { ImagePicker } from '@ionic-native/image-picker';  

...

    constructor(
        ...
        private file: File,
        private domSanitizer: DomSanitizer,
        private imagePicker: ImagePicker
    ) { }

    ...

    getImageFromGallery() {
        return this.imagePicker.getPictures({
            maximumImagesCount: 1
        })
        .then((results) => {
            return this.file.resolveLocalFilesystemUrl(results[0]);
        })
        .then((entry0: FileEntry) => {
            this.imageSrc = this.domSanitizer.bypassSecurityTrustUrl(entry0.toInternalURL());
        })
        .catch((err) => {
            console.log('failed to get image', err);
        });
    }