Android Development: Using Image From Assets In A WebView's HTML

Question

In my app I'm making a basic HTML help document. I wanted my app's logo in the HTML img tag itself, but I don't know how I'd reference to the logo which will be stored in assets.

Is this possible, if so how?

Thanks for the help!

@alexPriceXp i have the same problem as you... will you help me.. to put images in the webview html.??? — Siten, Mar 21 '11 at 08:26
@siten Well in the end I scrapped using HTML and instead decided to use Android's widgets to make the help document for my app as I still couldn't find a way to refer to an image in my app's assets folder in HTML. — AlexPriceAP, Mar 25 '11 at 21:17
you can try http://developerlife.com/tutorials/?p=369 and http://www.androidsnippets.org/snippets/33/ — pengwang, Sep 24 '10 at 01:32
for latest versions you can follow below link https://stackoverflow.com/a/64009716/3886504 — shobhan, Jan 04 '21 at 13:38

score 53 · Accepted Answer · answered Sep 01 '11 at 09:54

53

Put your Logo into the assets directory eg: assets/logo.png

Then load your html with:

webView.loadDataWithBaseURL("file:///android_asset/", htmlData, "text/html", "utf-8", null);

Reference your img like:

<img src="logo.png">

answered Sep 01 '11 at 09:54

spatialist

3,206
4
22
17

1

it seems like `loadDataWithBaseURL("file:///android_asset/, html, ..."` is the key to get it to show an image. Using `WebView.loadData(strHTML, "text/html", "utf-8");` doesn't show an image that's residing in assets. – Someone Somewhere Jan 31 '14 at 19:44
1

Make sure you have ending "/" at the base url path. – Ayyappa May 03 '18 at 16:57

Jorgesys · Answer 2 · 2013-03-28T16:00:03.983

24

Store the images in assets folder:

enter image description here

Read the image in the html from assets with file:///android_asset/

for example:

String sHtmlTemplate = "<html><head></head><body><img src=\"file:///android_asset/img/mybadge.png\"></body></html>";

load inside the WebView:

webView.loadDataWithBaseURL(null, sHtmlTemplate, "text/html", "utf-8",null);

edited Mar 28 '13 at 16:00

answered Jan 18 '13 at 19:03

Jorgesys

124,308
23
334
268

The image doesn't show up when using . I had to use @spatialist solution which involves the use of webView.loadDataWithBaseURL("file:///android_asset/", htmlData, "text/html", "utf-8", null); – Piyush-Ask Any Difference Mar 28 '13 at 01:52
ok i have edited my answer, the way that load the data inside the webview is different. – Jorgesys Mar 28 '13 at 15:58
@Elenasys I am trying to do something similar but I get this error :-chromium: [INFO:CONSOLE(1)] "Not allowed to load local resource: file:///sdcard/rreadyreckoner_images/download-r.png" I have also posted a question at http://stackoverflow.com/questions/39019828/how-to-open-a-image-stored-locally-using-html-code-in-android – anup Aug 18 '16 at 14:29

score 6 · Answer 3 · answered Sep 23 '10 at 16:03

6

You can reference assets with this URL syntax:

file:///android_asset/YourAssetFilename

answered Sep 23 '10 at 16:03

Robert Nekic

3,087
3
24
36

I know it works because I use it in one of my apps. The syntax definitely works in code, such as: webView.loadUrl("file:///android_asset/blah.png") And this site indicates it should also work in HTML, see the section about "Creating HTML that references resources bundled in the APK file itself". http://developerlife.com/tutorials/?p=369 – Robert Nekic Sep 24 '10 at 12:55
1

This does not work for me when including resources from inside the web view. I am not trying to load a file in code but from html. – BradLaney Jun 15 '12 at 16:43

score 6 · Answer 4 · answered Oct 29 '11 at 17:56

6

dump them into assets folder and just put in the html

<img src="filename.png">

simple as that

answered Oct 29 '11 at 17:56

Record413123

130
1
6

this is work !!! of cource you should put your html in assets folder,too. – Reza-S4 Dec 16 '17 at 00:03

score 2 · Answer 5 · answered Mar 13 '14 at 05:28

2

Put your Logo into the assets directory Example : assets/logo.png

Then

String imgData="<img src=home.png>";

webView.loadDataWithBaseURL("file:///android_asset/", imgData, "text/html", "utf-8", null);

answered Mar 13 '14 at 05:28

user2488738

21
4

shobhan · Answer 6 · 2020-09-24T06:14:34.207

Consider we have placed an image your_image.png in assets/imgs.

In earlier versions of android you can directly access images like below.

webView.loadData("<img src='file:///android_asset/imgs/your_image.png'/>",
        "text/html", "UTF-8");

But can't access files directly in latest versions due to added security concerns. for the latest versions we need to use WebViewAssetLoader. refer the below code.

Helper class to load local files including application's static assets and resources using http(s):// URLs inside a WebView class. Loading local files using web-like URLs instead of "file://" is desirable as it is compatible with the Same-Origin policy.

    final WebViewAssetLoader assetLoader = new WebViewAssetLoader.Builder()
            .addPathHandler("/assets/", new WebViewAssetLoader.AssetsPathHandler(this))
            .build();

    webView.setWebViewClient(new WebViewClient() {
        @Override
        public WebResourceResponse shouldInterceptRequest(WebView view,
                                                          WebResourceRequest request) {
            return assetLoader.shouldInterceptRequest(request.getUrl());
        }
    });
    webView.loadData("<img src='https://appassets.androidplatform.net/assets/imgs/your_image.png'/>",
            "text/html", "UTF-8");

for more information please refer android dev portal links https://developer.android.com/reference/androidx/webkit/WebViewAssetLoader https://developer.android.com/jetpack/androidx/releases/webkit?fireglass_rsn=true

Android Development: Using Image From Assets In A WebView's HTML

6 Answers6

Linked

Related