title: ionic cordova : how to display an image in img tag from android gallery when i get content:// url from filechooser plugin
body: <p>i wasted 6 days (and counting) struggling to display an image from gallery on android using ionic3-cordova</p>
  
  <pre><code>this.fileChooser.open()
    .then((uri) =&gt; {
      console.log('image uri is', uri);
  
    })
  </code></pre>
  
  <p>i cannot use <code>uri</code> directly to bind to my tag's src</p>
  
  <p>i tried to use another plugin and get a file entry</p>
  
  <pre><code>return this.file.resolveLocalFilesystemUrl(uri);    
  </code></pre>
  
  <p>i cannot use that either... unsafe uri!</p>
  
  <p>then i used <code>this.domSanitizer.bypassSecurityTrustUrl(entry.toInternalURL());</code></p>
  
  <p>and i cannot use that either to bind to img src</p>
  
  <p>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... </p>
  
  <p>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</p>
  
  <p>i added the cdvfile: in content security policy tag in index.html</p>
  
  <p>i am binding the img tag in html like this</p>
  
  <pre><code>&lt;img class="profile-img" [src]="imageSrc" /&gt;
  </code></pre>
  
  <p>the final error i get after diaper-changing the entry's internal url and binding it to img src is</p>
  
  <pre><code>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
  </code></pre>
  
  <p>my ionic ionic info is</p>
  
  <pre><code>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
  </code></pre>
  
  <p>my package.json contents are</p>
  
  <pre><code>"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"
    }
  </code></pre>
  
  <p>any help is greatly appreciated</p>