Android : Display images in Webview

Question

After processing a file, I get a HTML string in which the image is set as

<img src="abc.001.png" width="135" height="29" alt="" style="margin-left:0pt; margin-top:0pt; position:absolute; z-index:-65536" />

The path of the image should not be modified because I have to choose the file item from a list. The image is in the same directory as the file. I load the HTML string using loadData/loadDataWithBaseURL, but the image isn't displayed. I only see its frame.

How can I fix this? And can I apply that solution in case I have many images which are indexed as .001.jpg, .002.png , etc... (all in a directory) ?

Update: Thanks, it works with loadUrl() statement no matter how I name the image. In fact I have to read and process the content before loading it in WebView. That's why I use loadDataWithBaseUrl() statement and get the trouble above. Here's my code in the test project to read and display the content of Test.html.

    String res = "";        
    File file = new File(Environment.getExternalStorageDirectory()+"/Test.html");
    try {
        FileInputStream in = new FileInputStream(file);

        if (in != null) {               
            BufferedReader buffreader = new BufferedReader(
                    new InputStreamReader(in));
            String line;
            while ((line = buffreader.readLine()) != null) {
                res += line;
            }
            in.close();
        }
    } catch (Exception e) {
        e.printStackTrace();
    }       
    wv.loadDataWithBaseURL(null, res, "text/html", "utf-8", null);
  //wv.loadUrl("file://"+Environment.getExternalStorageDirectory()+"/Test.html");

The statement in // works but that's not what I can do in my real project. I have a solution: after processing the content I have to save it in a temporary HTML file then load it, that file will be delete later. However, I'm still looking forward to a better solution :)

this post might help you out https://stackoverflow.com/a/65563997/3886504 — shobhan, Jan 04 '21 at 14:05

Ponmalar · Answer 1 · 2012-05-23T04:10:17.150

Try to change the name of the image file. I thought this is because of double dot in the name.

<img id="compassRose" src="CompassRose.jpg"></img>

this is working for me....

Code:

import android.app.Activity;
import android.os.Bundle;
import android.os.Handler;
import android.webkit.WebView;

public class StackOverFlowActivity extends Activity {

    private Handler mHandler = new Handler();

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        WebView view=(WebView)findViewById(R.id.webView1);
        view.getSettings().setJavaScriptEnabled(true);
        view.loadUrl("file:///android_asset/index.html");
        view.addJavascriptInterface(new MyJavaScriptInterface(), "Android");
    }

    final class MyJavaScriptInterface
    {
        public void ProcessJavaScript(final String scriptname, final String args)
            {             
                mHandler.post(new Runnable()
                    {
                        public void run()
                            {
                                //Do your activities
                            }
                    });
            }
    }
}

index.html:

<html>
<head>
  <title title="Index"></title>                                   
</head>

<body>
  <h2>Android App demo</h2>
  <br /> <img src="CompassRose.jpg" />
</body>
</html>

enter image description here

Result:

enter image description here

I made another Android project just to test with "abc.jpg" name. Nothing different, WebView just show the image frame. So I think the WebView doesn't recognize the src part not because of the image name. Unfortunately I'm not able to put in the file the full path of the image. — Minh Nguyen, May 22 '12 at 13:34
actually this happens with some images but other works, i heard its because or poorly formatted jpegs which webview cannot tolerate — duckduckgo, Sep 16 '13 at 00:45

score 3 · Answer 2 · answered Apr 23 '16 at 07:18

3

simply use:

webview.loadUrl("file:///android_asset/mypicture.jpg");

answered Apr 23 '16 at 07:18

Ali Ziaee

569
5
10

score 1 · Answer 3 · answered Oct 09 '13 at 12:19

Your problem is with the line:

wv.loadDataWithBaseURL(null, res, "text/html", "utf-8", null);

The first parameter (baseURL) is null. For some reason, WebView then refuses to load any linked resources even if you use absolute URLs. You might find that it will work if you change your code to (assuming your images are stored in the external dir):

wv.loadDataWithBaseURL ("file://" + Environment.getExternalStorageDirectory(), res, "text/html", "utf-8", null);

Remember to add the proper permission if you refer to resources on the network:

<uses-permission android:name="android.permission.INTERNET" />

Sorry, a little late in my reply. I was researching a similar problem when I came across this post.

Had the same problem, all I was missing was `Environment.getExternalStorageDirectory()` in `wv.loadDataWithBaseURL ("file://" + Environment.getExternalStorageDirectory(), res, "text/html", "utf-8", null);` — Sagar Pilkhwal, Nov 11 '14 at 16:32

score 0 · Answer 4 · answered Jul 16 '16 at 06:52

0

       WebView webView=(WebView)findViewById(R.id.my_wb);
        String url = "YOUR URL";
        webView.getSettings().setLoadsImagesAutomatically(true);
        webView.setScrollBarStyle(View.SCROLLBARS_INSIDE_OVERLAY);
        webView.loadUrl(url);

answered Jul 16 '16 at 06:52

Abhisek

791
5
3

3

Welcome to StackOverflow. Though this answer may work, please consider adding more information/description to help other users understand what you mean. Thanks. – Jaqen H'ghar Jul 16 '16 at 17:45
I'm interested to know how `R.id.my_wb` resolves if I have a ``... what is R? – ekkis Feb 24 '20 at 00:39

Android : Display images in Webview

4 Answers4

Linked