Images are not displayed while loading html file in android web view

Question

I need to load a html file which will display images in android emulator. I have a separate css file and html fie and images to be displayed in /assets folder of my application. I read the css file and html file using getAssets(). I tried to load the html file using loadData() method because i am in the situation to use only string to get html file in a string and load the html file only by using that string but not by using "file:///android_asset/eppi.html". Can anyone say the solution?.You can understand from my following code. thanks in advance.

my MainActivity.java code:

 package com.exercise.AndroidHTML;

 import java.io.InputStream;
 import java.io.IOException;

 import android.annotation.SuppressLint;
 import android.app.Activity;
 import android.os.Bundle;
 import android.webkit.WebSettings;
 import android.webkit.WebView;
 import android.content.res.AssetManager;


 public class AndroidHTMLActivity extends Activity {

    WebView myBrowser;
String html;
String css;
String HTML;

 /** Called when the activity is first created. */
 @SuppressLint("SetJavaScriptEnabled")
@Override
 public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.main);
    myBrowser = (WebView)findViewById(R.id.mybrowser);

    AssetManager assetmanager=getAssets();
    InputStream input;
    try{
        input= assetmanager.open("eppi.html");

        int size=input.available();
        byte[] buffer=new byte[size];
        input.read(buffer);
        input.close();

         html=new String(buffer);



    } catch (IOException e){
        e.printStackTrace();
    }
    try{
        InputStream input1= assetmanager.open("eppi.css");

        int size=input1.available();
        byte[] buffer=new byte[size];
        input1.read(buffer);
        input1.close();

         css=new String(buffer);
    }catch (IOException e){
        e.printStackTrace();
    }

     HTML=css+html;     
    myBrowser.getSettings().setJavaScriptEnabled(true);
    WebSettings settings = myBrowser.getSettings();
    settings.setDefaultTextEncodingName("utf-8");
    myBrowser.loadData(HTML,"text/html","utf-8");


 }
 }

my eppi.css file:

<html>
<head>
<style>
#header{
height:80px;
width:320px;
position:absolute;
background-color:#000000;
}
#text{
height:80px;
width:159px;
position:absolute;
color:#806C00;
}
#logo{
top:2px;
    left:200px;
height:80px;
width:97px;
position:absolute;

}
#image{
top:79px;
height:80px;
width:159px;
position:absolute;

}
#image1{
top:79px;
left:159px;
height:80px;
width:161px;
position:absolute;

}
#image2{
top:158px;
height:80px;
width:159px;
position:absolute;

}
#image3{
top:158px;
left:159px;
height:80px;
width:161px;
position:absolute;

}
#body{
margin:0;
padding:0;
}

</style>
</head>

my eppi.html code:

<body id="body">
<div id="header">
<div id="text">
<center>
h4><b><i>The Show
Welcomes You</i></b></h4>
</center>
</div>
<div id="logo">
<img src="logo.png" width="100" height="75">
</div>
</div>
<div id="image">
<a href="Media.html"><img src="mine.png" width="159" height="80"/></a>
</div>
<div id="image1">
<a href="Trading.html"><img src="offers.png" width="161" height="80"/></a>
</div>
<div id="image2">
<a href="Hours.html"><img src="horse.png" width="159" height="80"/></a>
</div>
<div id="image3">
<a href="Release.html"><img src="entering.png" width="161" height="80"/></a>
</div>
</body>
</html>

maybe you need a www-folder for that, see this

David Karlsson
– David Karlsson

2013-03-22 14:14:19 +00:00
Commented Mar 22, 2013 at 14:14 — David Karlsson
– David Karlsson, Commented Mar 22, 2013 at 14:14
I think this is the same problem, see this

David Karlsson
– David Karlsson

2013-03-22 14:19:15 +00:00
Commented Mar 22, 2013 at 14:19 — David Karlsson
– David Karlsson, Commented Mar 22, 2013 at 14:19

vbence · Accepted Answer · 2013-03-22 14:04:52Z

1

You can parse the HTML (at least at a rudimentary level), find images and load them manually (like you do with the HTML file).

After you can change the image URLs in the HTML to base64-echoded data URLs.

answered Mar 22, 2013 at 14:04

vbence

20.4k10 gold badges74 silver badges119 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

PM16 Over a year ago

Thanks. I tried as what you told. But it does not work for me

vbence Over a year ago

@Meena Please give some details. Where are you stuck? It is just a question of debugging as I'm sure the Android browser supports data URLs.

tehnolog · Accepted Answer · 2013-03-23 07:58:29Z

0

You must change image path. Instead of <img src="mine.png"> write <img src="file:///android_asset/mine.jpg">

answered Mar 23, 2013 at 7:58

tehnolog

1

Collectives™ on Stack Overflow

Images are not displayed while loading html file in android web view

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related