问题
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);
})
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);
i cannot use that either... unsafe uri!
then i used this.domSanitizer.bypassSecurityTrustUrl(entry.toInternalURL());
and i cannot use that either to bind to img src
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...
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
i added the cdvfile: in content security policy tag in index.html
i am binding the img tag in html like this
<img class="profile-img" [src]="imageSrc" />
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
my ionic ionic info is
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
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"
}
any help is greatly appreciated
回答1:
I got it working with ImagePicker. Here is how I did it
in TS file:
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);
});
}
and HTML is <img [src]="imageSrc" class="profile-image" />
来源：https://stackoverflow.com/questions/50335223/ionic-cordova-how-to-display-an-image-in-img-tag-from-android-gallery-when-i-g