Unable to show Image to img tag in android

[bha2020]

After selecting image from gallery it gives shows path and image is on that path only but doesn't shows image to <ion-img [src]=path></ion-img>

this.imagepicker.getPictures(option).then(results=>{
  for(var i=0;i<results.length;i++) {
    this.path= results[i]+"";
    alert("gallery path: "+this.path);
  }}).catch(error=>{
    alert(error);
  })

error: SystemWebChromeClient: http://localhost/home: Line 0 : Not allowed to load local resource: file:///data/user/0/pkg/cache/tmp_IMG-20190730-WA00006256221958114017552.jpg I/chromium: [INFO:CONSOLE(0)] "Not allowed to load local resource: file:///data/user/0/pkg/cache/tmp_IMG-20190730-WA00006256221958114017552.jpg", source: http://localhost/home (0)

please help.

[thevirajshelke]

I was facing the same issue. The solution for this is as follows.

ionic cordova plugin add cordova-plugin-ionic-webview
npm install @ionic-native/ionic-webview

Install the plugin named Ionic Webview and use the function convertFileSrc() provided by them. This converts the file:// protocol to http:// protocol. I am sure this will solve your issue. It solved mine. Just make sure you import webview and put it in providers array in app module file.

    import { WebView } from '@ionic-native/ionic-webview/ngx'; 
    constructor(private webview: WebView) { }

    img = this.webview.convertFileSrc('file:///Users/dan/camera-image-12345.png')

Tip: The plugin is used to select multiple files. In your code you are appending the path, right? The code will work fine for a single image but might not work with multiple images! I would recommend storing all the paths that you get from the plugin into the array and then using it as per your need in HTML code. You can refer a single path from the array and display it using img tag or you can use ngFor and display the data :)

A small snippet for you

  images = []
  someFunction() {
    this.imagePicker
      .getPictures({
        maximumImagesCount: 15
      })
      .then(
        images => {
          for (const image of images) {
             this.images.push(this.webview.convertFileSrc(image))
          }
        },
        err => {}
      )
  }

I hope this helps :) Do lemme know :+1: