title: Display local android image in a webview using javascript or jquery
body: <p>Scene: I am trying to display a file image selected from the gallery into a webview using javascricpt and/or jquery but I am not able to do so. The same works while opening the html in a desktop browser.</p>
  
  <p>What I have tried so far is this in the android code is this:</p>
  
  <ol>
  <li>Written the <code>openFileChooser</code> code and getting the image path and also the image bytes.</li>
  <li><p>calling the following in onActivityResult method:</p>
  
  <pre><code>String js = "javascript:loadImage(file://" + imagePath + ")";
  mWebView.loadUrl(js);
  </code></pre></li>
  </ol>
  
  <p>The html looks like this:</p>
  
  <pre><code>&lt;div class="file_chooser"&gt;
  &lt;!-- &lt;input type="submit" value="File chooser" id="btnSubmit" onclick="sayHello();" &gt; --&gt;
  &lt;input type="file" name="banner_image" id="banner_image" onChange="loadImage(this);" accept="image/*" /&gt;
  
      &lt;br /&gt;
      &lt;br /&gt;
      &lt;br /&gt;
      &lt;br /&gt;
      &lt;br /&gt;
      &lt;br /&gt;
      &lt;br /&gt;
      &lt;br /&gt;
      &lt;br /&gt;
  
  &lt;img alt="" id="image" src=""  width="200px" height="200px" onclick="showSrc(this.src);"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and the javascript looks like this:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      function loadImage(input) {
              if (input.files &amp;&amp; input.files[0]) {
              Android.alert('input: ' + input.files[0]);
          var reader = new FileReader();
  
  
          reader.onload = (function(input) {
      return function(e) {
           $('#image').attr('src', e.target.result);
          console.log('onload stage finished');
      };
  })(input);
  reader.onloadend = (function() {
      // $('#image').src(file.name);
  });
  
              reader.readAsDataURL(input.files[0]); 
  
              //data:image/jpg;base64,xxxxxxxxxxxxxxxxxxxxxxxxxxxx -&gt; this did not work
          }
  
    function showSrc(src) {
          Android.alert('src : ' + src);
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>But i seem to be messing with the android code and also javascript, since i do not know jscript that well.</p>
  
  <p>Please assist as to how to display an image after selection from the gallery.</p>
  
  <p><strong>EDIT:</strong></p>
  
  <p>I have gone through lotsa links that show how to call a javscript function from android , and how to display an image by calling loadBaseUrl with the new html code that has an image inside the src tag, like <a href="https://stackoverflow.com/questions/14013504/save-image-locally-and-display-in-webview">this</a>, but this is not what I really want.</p>