ionic cordova:当我从文件选择器插件获取内容://url 时，如何在 android 库的 img 标签中显示图像 [英] ionic cordova : how to display an image in img tag from android gallery when i get content:// url from filechooser plugin

问题描述

我浪费了 6 天(并且还在继续)努力使用 ionic3-cordova 在 android 上显示来自画廊的图像

i wasted 6 days (and counting) struggling to display an image from gallery on android using ionic3-cordova

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

  })

我不能直接使用 uri 绑定到我的标签的 src

i cannot use uri directly to bind to my tag's src

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

i tried to use another plugin and get a file entry

return this.file.resolveLocalFilesystemUrl(uri);    

我也不能使用它...不安全的 uri！

i cannot use that either... unsafe uri!

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

我也不能用它来绑定到 img src

and i cannot use that either to bind to img src

我不明白获取 uri 的意义，为了安全而转换为另一个，然后再次转换为另一个以获得更高的安全性.. 仍然无法达到目的......

i do not understand the point in getting an uri, converting to another for security and then converting to another again for more security.. and still can't meet the purpose...

除了沮丧之外，请帮助我如何在这个不断变化的角度科尔多瓦离子世界中将 html img 标签的 src 绑定到从画廊中选择的图像.一个学期前回答的文档/问题已经过时了 angular 6

frustration aside, please help me how to bind the html img tag's src to chosen image from gallery in this ever changing angular cordova ionic world.. the doc/questions answered a semester ago are already outdated with angular 6

我在 index.html 中添加了 cdvfile: in content security policy 标签

i added the cdvfile: in content security policy tag in index.html

我正在像这样在html中绑定img标签

i am binding the img tag in html like this

<img class="profile-img" [src]="imageSrc" />

在更改条目的内部 url 并将其绑定到 img src 后我得到的最后一个错误是

the final error i get after diaper-changing the entry's internal url and binding it to img src is

GET cdvfile://localhost/content/com.android.providers.media.documents/document/image%3A4350:1 GET cdvfile://localhost/content/com.android.providers.media.documents/document/image%3A4350 0 ()
Image (async)
DefaultDomRenderer2.setProperty @ platform-browser.js:1283
DebugRenderer2.setProperty @ core.js:12365
setElementProperty @ core.js:9112
checkAndUpdateElementValue @ core.js:9063
checkAndUpdateElementInline @ core.js:9010
checkAndUpdateNodeInline @ core.js:11359
checkAndUpdateNode @ core.js:11325
debugCheckAndUpdateNode @ core.js:11962
debugCheckRenderNodeFn @ core.js:11948
(anonymous) @ AddSalonPage.html:32
debugUpdateRenderer @ core.js:11940
checkAndUpdateView @ core.js:11312
callViewAction @ core.js:11548
execComponentViewsAction @ core.js:11490
checkAndUpdateView @ core.js:11313
callViewAction @ core.js:11548
execEmbeddedViewsAction @ core.js:11511
checkAndUpdateView @ core.js:11308
callViewAction @ core.js:11548
execComponentViewsAction @ core.js:11490
checkAndUpdateView @ core.js:11313
callViewAction @ core.js:11548
execComponentViewsAction @ core.js:11490
checkAndUpdateView @ core.js:11313
callViewAction @ core.js:11548
execEmbeddedViewsAction @ core.js:11511
checkAndUpdateView @ core.js:11308
callViewAction @ core.js:11548
execComponentViewsAction @ core.js:11490
checkAndUpdateView @ core.js:11313
callWithDebugContext @ core.js:12204
debugCheckAndUpdateView @ core.js:11882
ViewRef_.detectChanges @ core.js:9692
(anonymous) @ core.js:5086
ApplicationRef.tick @ core.js:5086
(anonymous) @ core.js:4929
t.invoke @ polyfills.js:3
onInvoke @ core.js:4062
t.invoke @ polyfills.js:3
r.run @ polyfills.js:3
NgZone.run @ core.js:3918
next @ core.js:4929
schedulerFn @ core.js:3712
SafeSubscriber.__tryOrUnsub @ Subscriber.js:253
SafeSubscriber.next @ Subscriber.js:191
Subscriber._next @ Subscriber.js:129
Subscriber.next @ Subscriber.js:93
Subject.next @ Subject.js:53
EventEmitter.emit @ core.js:3704
checkStable @ core.js:4031
onHasTask @ core.js:4075
t.hasTask @ polyfills.js:3
t._updateTaskCount @ polyfills.js:3
r._updateTaskCount @ polyfills.js:3
r.runTask @ polyfills.js:3
o @ polyfills.js:3
Promise.then (async)
r @ polyfills.js:3
t.scheduleTask @ polyfills.js:3
onScheduleTask @ polyfills.js:3
t.scheduleTask @ polyfills.js:3
r.scheduleTask @ polyfills.js:3
r.scheduleMicroTask @ polyfills.js:3
f @ polyfills.js:3
c @ polyfills.js:3
(anonymous) @ polyfills.js:3
(anonymous) @ index.js:530
(anonymous) @ resolveLocalFileSystemURI.js:76
success @ fileSystems-roots.js:37
callbackFromNative @ cordova.js:291
(anonymous) @ VM699:1

我的离子离子信息是

cli packages: (---AppDataRoaming
pm
ode_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

我的 package.json 内容是

my package.json contents are

"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 的合作.这是我的做法

I got it working with ImagePicker. Here is how I did it

在 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 是 <img [src]="imageSrc" class="profile-image"/>

这篇关于ionic cordova:当我从文件选择器插件获取内容://url 时，如何在 android 库的 img 标签中显示图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！