@Android display /res/viewable in WebView

Question

I am throwing HTML to a webview to render. In the HTML I need to load an image that I have in /res/drawable.

I have /res/drawable/my_image.png and code such as this:

final WebView browser = (WebView) findViewById(R.id.my_webview);
String html = new MyHelper(myObject).getHtml();
browser.loadDataWithBaseURL("", html, "text/html", "UTF-8", "");

Where the String html has something like:

<html><head>
<h1>Here is the image</h1>
<img src="my_image.png" />
</head><html>

The question is, what should that image src attribute be to refer to the image in /res/drawable?

I found a solution that works for me. I did not figure out how to load images from /res/drawable, but I can copy the image to /assets and refer to the image by file:///android_asset/my_image.png — MikeNereson, Apr 13 '10 at 16:09
So I copied res/drawable/my_image.png to assets/my_image.png then use — MikeNereson, Apr 13 '10 at 16:09

score 30 · Accepted Answer · answered Dec 02 '10 at 18:07

30

This worked in android 2.2

<img src = "file:///android_res/drawable/q1.png" />

where q1.png is in the res/drawable-hdpi folder

answered Dec 02 '10 at 18:07

Superfuzz

316
3
3

**Motorola Zoom 3.2** i had to make it `file:/android_res/drawable/app_icon_1.png`. But it may be cause this was inserted in webview through Javacode using `mWebView.addJavascriptInterface()`. – Vijay C Mar 12 '12 at 11:36

score 5 · Answer 2 · answered Apr 13 '10 at 15:50

5

I admit I don't know much about WebViews / HTML, but it seems like you're taking the more complicated route for this. There's an easy way to load the HTML file; put it in your assets folder, and then it can be referred to as follows.

WebView webView = new WebView(this);
webView.loadUrl("file:///android_asset/index.html");
setContentView(webView);

Obviously your layout is more complex as you have more than just the WebView so you can't use setContentView() directly, but that's the basic idea. Then to reference an image in that HTML file, I used a <img> tag like so:

<img src="res/drawable/icon.png"/>

Does that work for you?

answered Apr 13 '10 at 15:50

Steve Haley

55,374
17
77
85

its off topic, but loadUrl is not suitable. I am downloading HTML fragments from one of our applications, decorating that HTML, and then sending the HTML to the view. For this particular use case I am getting HTML that has an object tag to show an FLV. I have to replace that with an anchor tag to the MP4 of the FLV. The anchor tag contains an image, a play button. This play button is the resource I am trying to load. does not work. – MikeNereson Apr 13 '10 at 16:02
Hmm. Strange that as described above doesn't work, but it's probably getting confused with where the starting folder is. Anyway, judging from your comments directly to the question, it seems like you found a way to solve this. I'm glad the comment about the assets folder helped, even if I was going down a different track! – Steve Haley Apr 13 '10 at 17:06
Though Superfuzz's solution seem to work for Android2.2+, this approach seem to scale back to Android1.6. Tested in Emulator. By the way +1 for Steve Haley, i may never came to this round about solution without this post. – Samuel Dec 08 '11 at 02:38

score 3 · Answer 3 · edited Jan 27 '14 at 03:06

user302750,

Your method is incorrect. res/drawable/banner300.jpg should be file:///android_res/drawable/banner300.jpg.

banner300.jpg can be in one of the following locations in your project, and android will automatically load the correct one for the device you're using.

res/drawable/banner300.jpg
res/drawable-ldpi/banner300.jpg
res/drawable-mdpi/banner300.jpg
res/drawable-hdpi/banner300.jpg
res/drawable-xhdpi/banner300.jpg

The assets folder is for generic resources that you don't need different versions of. An example might be an XSL template, or something of that nature.

MikeNereson, your response to your problem is also incorrect, drawable resources should be contained in the res directory.

Here's an example from my own project. I output html, exactly like this:

<img src="file:///android_res/drawable/stats_btn.png"/>

If using an ldpi device, I get the ldpi image, if using hdpi or mdpi, I get the appropriate one for those as well. Android resolves file:///android_res/drawable/stats_btn.png to one of the following resources that I have in my project.

./res/drawable-ldpi/stats_btn.png
./res/drawable-hdpi/stats_btn.png
./res/drawable-mdpi/stats_btn.png

score 2 · Answer 4 · edited May 23 '17 at 12:22

2

Answers involving file:// URLs may not work any more as of Android 4.0. See answer to this question. A way that will work is in the answer here.

edited May 23 '17 at 12:22

Community

1
1

answered May 21 '12 at 10:16

Lawrence D'Oliveiro

2,768
1
15
13

score 2 · Answer 5 · answered Mar 31 '11 at 15:19

From my tests the path, "file:///android_res/drawable/q1.png" only works with 2.2+. For 2.1 that gives a file not found error. Moving the resource to assets will work but that isn't really feasible if you want to make use of the drawable features (meaning you'd need a copy of the image in each folder...).

score 0 · Answer 6 · edited Mar 14 '12 at 09:27

I have the exact same problem, but neither placing the image file in res/drawable (which I first had to create, I hust had drawable-hdpi, -ldpi and -mdpi already existing) or using the file:///asset/ URL worked for me.

Here is what I do:

Activity:

    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        mWebView = (WebView) findViewById(R.id.webview);
        mWebView.getSettings().setJavaScriptEnabled(true);
        String summary = "<html><body><div style=\"background:red; width:300px; height:50px;\"></div><img src=\"res/drawable/banner300.jpg\"/></body></html>";
        mWebView.loadData(summary, "text/html", "utf-8");

Then in res/drawable I placed the banner300.jpg - but it does not show up. Any ideas?

score -3 · Answer 7 · answered Jul 01 '11 at 19:33

-3

You load the drawables like you would anywhere else in your code... http://developer.android.com/guide/topics/resources/drawable-resource.html

Resources res = getResources();
Drawable drawable = res.getDrawable(R.drawable.myimage);

also @MikeNereson using Android, you can only directly access raw files that are located in the assets directory and SDCard.

answered Jul 01 '11 at 19:33

rf43

4,385
3
23
28

... and by access I mean the ability to manipulate, alter, upload and delete. This means that once the file is in the drawable folder it will always be there unless you explicitly remove it and recompile your apk. Also your user will never be able to do anything with the image. – rf43 Jul 01 '11 at 19:34
3

What does this answer have to do with showing an image with HTML displayed in a WebView? – Ted Hopp Jan 30 '12 at 22:24

@Android display /res/viewable in WebView

7 Answers7

Linked

Related