Android WebView - Open Local Images

Question

For simplicity purpose, I will make the question short

I have the following HTML which I load into my WebView

<h1>Heading</h1>
<p>some description and imaages <img src="local file source"/>
</p>

The above works perfectly and shows image(s) in webview but I want to make my images clickable so that users can click and open the image.

What confusing me is, do I need to create a new activity to open the image and how do I handle click on images in HTML inside the webview

In HTML I can simply put the image in herf

<a href="http://imagepath">
 <img src="http://imagepath"/>
</a>

How do I do this for local images?

`can click and open the image` : Open the image in the WebView or in a native Android widget like an ImageView? — SushiHangover, Mar 14 '18 at 02:59
I am looking for something like this but I am not sure how to do this, my images show perfectly so basically you mean `href` to local file path should work? Nothing happens when i click on the image — Ali, Mar 14 '18 at 04:57

Tung Tran · Answer 1 · 2018-03-14T03:09:57.403

1

You try src="file:///path_to_image" Examples: src="file:///storage/emulated/0/Folder/abc.png"

edited Mar 14 '18 at 03:09

answered Mar 14 '18 at 02:49

Tung Tran

2,885
2
17
24

For me I was missing the file:/// before the rest of the path, and didn't think of it until I saw this post. I feel that this is an important answer since I saw several Stack Qs along these lines, but without this critical part. – TheRobQ Sep 17 '19 at 19:36

score 0 · Answer 2 · answered Mar 14 '18 at 02:51

0

You can use click action in js as usual, and use @JavascriptInterface to define a bridge of your js and webview, when the image clicked, notify your activity to show the image as you want.

answered Mar 14 '18 at 02:51

yu wang

283
1
6

score 0 · Accepted Answer · answered Mar 14 '18 at 10:05

How do I do this for local images?

Load Html file in Webview and put your image in Assets folder and read that image file using Html.

Here is my main.html:

<html>
  <head>

  </head>
  <body>
    <h1>Login Form</h1>
    <img src="download.jpg" width="200px" onClick="Foo.SomeMethod('bla-bla')"></img>
  </body>
</html>

Then, load that Html file in Webview:

webView.LoadUrl("file:///android_asset/main.html");

how do I handle click on images in HTML inside the WebView

You could refer to:

Here is a simple demo:

public class MainActivity: Activity
{  
    class Foo : Java.Lang.Object // do not need Java.Lang.IRunnable 
    {
        Context context;

        public Foo(Context context)
        {
            this.context = context;
        }

        [Export] // !!! do not work without Export
        [JavascriptInterface] // This is also needed in API 17+
        public void SomeMethod(string param)
        {
            Toast.MakeText(context, "This is a Toast from C#!" + param, ToastLength.Short).Show();
        }
    }

    protected override void OnCreate(Bundle bundle)
    {
        base.OnCreate(bundle);

        SetContentView(Resource.Layout.Main);

        WebView view = FindViewById<WebView>(Resource.Id.web);
        view.Settings.JavaScriptEnabled = true;
        view.AddJavascriptInterface(new Foo(this), "Foo");
        view.LoadUrl("file:///android_asset/main.html");
    }
}

Android WebView - Open Local Images

3 Answers3