ionic cordova: как отобразить изображение в теге img из галереи Android, когда я получаю контент: // url из плагина filechooser - PullRequest
Новая
       64

ionic cordova: как отобразить изображение в теге img из галереи Android, когда я получаю контент: // url из плагина filechooser

0 голосов
/ 14 мая 2018

я потратил 6 дней (и считаю), пытаясь отобразить изображение из галереи на Android с помощью ionic3-cordova 

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

  })

Я не могу использовать uri напрямую для привязки к src

* моего тега1006 * Я пытался использовать другой плагин и получить запись в файле 
return this.file.resolveLocalFilesystemUrl(uri);

Я не могу использовать это либо ... небезопасно, Ури!

, тогда я использовал this.domSanitizer.bypassSecurityTrustUrl(entry.toInternalURL());

и я не могу использовать это либо для привязки к img src

Я не понимаю смысла в получении URI, преобразовании в другое для безопасности и последующем преобразовании в другое для большей безопасности ... и до сих пор не могувстретить цель ...

разочарование в стороне, пожалуйста, помогите мне, как связать src тега html img с выбранным изображением из галереи в этом постоянно меняющемся угловатом ионном мире. Документ / вопросы, на которые дан ответ семь месяцев назад,уже устарел с угловой 6

я добавил cdvfile: в теге политики безопасности содержимого в index.html

я привязываю тег img в html следующим образом: 

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

последняя ошибка, я Get после смены подгузника внутренний URL-адрес записи и привязка его к img src равна 

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: (---\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

мое package.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"
  }

любая помощь приветствуется

1 Ответ

0 голосов
/ 16 мая 2018

Я получил его работать с 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 <img [src]="imageSrc" class="profile-image" />

...