How to put image from drawable folder at HTML file

Question

I have a HTML file in my /res/raw/test.html

and i show it in web view using following code

WebView wbview = (WebView)findViewById(R.id.webView1);
InputStream fin;
    try
    {
        fin = getResources().openRawResource(R.raw.manual);
        byte[] buffer = new byte[fin.available()];
        fin.read(buffer);
        fin.close();
        wbview.loadData(new String(buffer), "text/html", "UTF-8");
    }
    catch (IOException e)
    {
        e.printStackTrace();
    }

And this is my code of my HTML file

<html>
    <p>
    Lorem ipsum dolor sit amet,
    </p>
  <table>
   <tr>
         <td>
       <img src=\\"file:///android_asset/test_image2.jpg\"/>    
           <img src="test_image2.jpg" width="50px" alt="Hi">

       <img src=\"res/drawable/test_image.png"/>
       <img src="file:///android_res/drawable/test_image.png" />
       <img src=\"file:///android_res/drawable/test_image.png"\ />
         </td>
   </tr>
</table>
</html>

I want to display the image from my resource folder in my html file... i tried all possibility still not work. It's just show a HTML text but for a image i don't have idea how to show it

Please help me

you can check this answer by Jonas Alves http://stackoverflow.com/questions/4534043/android-add-image-to-webview-from-a-drawable — Krutik, Apr 18 '12 at 08:35

score 18 · Accepted Answer · answered Apr 18 '12 at 08:39

18

You can load your html page from android assets folder like below code.

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

and also you need to make your html like this below .

 <html>
  <p>
   Lorem ipsum dolor sit amet,
  </p>
<table>
  <tr>
      <td>
     <img src="file:///android_asset/test_image2.jpg"/>    
      <img src="file:///android_asset/test_image2.jpg" width="50px" alt="Hi">
     <img src="file:///android_res/drawable/test_image.png"/>
     <img src="file:///android_res/drawable/test_image.png" />
     <img src="file:///android_res/drawable/test_image.png" />
        </td>
      </tr>
    </table>
  </html>

answered Apr 18 '12 at 08:39

Herry

7,037
7
50
80

4

+1 exact solution. Suggestion: Place the images inside the asset folder and no need to write file:///android_asset path, just reference it by RelativePath using . (dot) – Paresh Mayani Apr 18 '12 at 08:44
Yes it's work very well.. Actually i need my HTML files still in res folder so a localization will work i modified your solution to ... wbview.loadUrl("file:///android_res/raw/manual.html"); ... and put res/raw/manual.html and res/raw-jp/manual.html, etc maybe my problem before at this code wbview.loadData(new String(buffer), "text/html", "UTF-8"); this line make html just showing text only Thanks for an answers – Aldy Chrissandy Apr 18 '12 at 09:19
if i put image into assets it works fine, but not in drawable – Hiren Dabhi Jun 13 '12 at 06:30
2

@Herry: This works well for images in your own app. But do you know how we refer to bundled images, like `@android:drawable/ic_menu_info_details.png`? – Luis A. Florit Dec 22 '13 at 19:32
2

Remember to add a rule to proguard config file to let it work also on production apk: -keepclassmembers class **.R$* { public static ; } -keep class **.R$* see [here](http://stackoverflow.com/questions/6280188/prevent-proguard-to-remove-specific-drawables?answertab=votes#tab-top) – j.c Feb 22 '14 at 12:28
1

@Herry it is not working in my case "" – kk1 Dec 02 '16 at 07:38
this was not working – Prashant Gosai Jan 10 '18 at 15:37
@LuisA.Florit Did you get the solution? – user1090751 Nov 28 '20 at 15:01

How to put image from drawable folder at HTML file

1 Answers1