CODEWITHSUNDEEP
androidxamarin
Ali
Ali

Reputation: 2768

Android WebView - Open Local Images

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?

Upvotes: 0

Views: 655

Answers (3)

York Shen
York Shen

Reputation: 9084

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");
    }
}

Upvotes: 0

Tung Tran
Tung Tran

Reputation: 2955

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

Upvotes: 1

yu wang
yu wang

Reputation: 293

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.

Upvotes: 0

Related Questions