Load HTML data into WebView, referencing local images?

Question

If I'm loading a WebView with an HTML document directly (no web server) using WebView.loadData() is there a way for that document to reference local images? If so where do I place them, and how do I reference them?

Or alternatively is there a way to easily encode and embed bitmaps into the HTML document?

I need to display local HTML documents that include images and I'd like to avoid setting up a remote server to serve the resources.

I expect 1-5 images per document, with one document and WebView per activity, so not many. Tried what with AssetManager? — Ollie C, Mar 19 '12 at 13:21
I use assets. In assets folder my html files, in assets/img folder - images. Reference in html : ... ... — Vyacheslav Shylkin, Mar 19 '12 at 13:23

score 3 · Answer 1 · answered Mar 19 '12 at 13:23

3

Did you try file:///android_asset/www/image.jpg as image src attribute ? If you have the html document as a file, then you can just put the images into a folder next to the file in assets.

answered Mar 19 '12 at 13:23

Demonick

2,116
3
30
40

I don't understand what you're suggesting. Are you saying file:///android_asset allows an HTML doc to refer directly to image resources in the APK assets? – Ollie C Mar 19 '12 at 13:37
It's a guess, modifiying something in assets at runtime is not possible, but reading data from assets should be possible. – Demonick Mar 19 '12 at 13:40
Simliar solution, but looks a bit more elegant to me (http://stackoverflow.com/a/6134462/285431): in html use `` and load the html file with `webview.loadUrl("file:///android_asset/abc.html");` – Dirk Nov 16 '14 at 13:13

score 2 · Accepted Answer · answered Mar 19 '12 at 13:22

2

use this

 String html = new String();
        html = ("<html><BODY  ><table  style='margin-top:100px;'  align='center'><tr><td><img src=\""+your_image_localpath+"\" width=\""+800+"px\" height=\""+800+"px\" ></td></tr></table> </BODY></html>" );

        webView1.loadDataWithBaseURL("file:///sdcard/data/data/your_package_name/",
               html,
               "text/html",
               "utf-8",
               "");

answered Mar 19 '12 at 13:22

Venkata Krishna

1,543
1
11
19

1

this seems pretty messy as it involves copying all the images out of the assets into the app storage. If at all possible I'd rather reference the images direct from the app. – Ollie C Mar 19 '12 at 13:36

score 0 · Answer 3 · edited May 23 '17 at 10:28

0

You can use base64 encoding if you don't care about the images and they are just part of the html page.

There is another thread that explain how to use the base64 encoding Embedding Base64 Images

edited May 23 '17 at 10:28

Community

1
1

answered Sep 20 '12 at 12:28

Luigi Agosti

925
10
19

score 0 · Answer 4 · answered Aug 29 '14 at 16:47

I think this is better and more clean:

StringBuilder html = new StringBuilder();
                    html.append("<html>");
                    html.append("<head>");
                    html.append("</head>");
                    html.append("<body>");
                    html.append("<p><img style='width: 100%;' src='your_image.png' /></p>");
                    html.append("</body></html>");
                    your_webview.loadDataWithBaseURL("file:///android_asset/", html.toString(), "text/html", "UTF-8", "");

Load HTML data into WebView, referencing local images?

4 Answers4