Load the image saved in sdcard in webview

Question

The below code is used

mWebView = (WebView) findViewById(R.id.webview);
mWebView.getSettings().setAllowFileAccess(true);
mWebView.getSettings().setJavaScriptEnabled(true);
String base = Environment.getExternalStorageDirectory().getAbsolutePath().toString();
String imagePath = base + "/test.jpg";  
mWebView.loadUrl(imagePath);

the image is not loading ...

also tried

mWebView = (WebView) findViewById(R.id.webview);
mWebView.getSettings().setAllowFileAccess(true);
mWebView.getSettings().setJavaScriptEnabled(true);
mWebView.getSettings().setBuiltInZoomControls(true);
String base = Environment.getExternalStorageDirectory().getAbsolutePath().toString();
String imagePath = base + "/test.jpg";
String html = "<html><head></head><body><img src=\""+ imagePath + "\"></body></html>";
mWebView.loadData(html, "text/html","utf-8");

Please help

score 54 · Accepted Answer · edited Nov 01 '12 at 07:49

54

mWebView = (WebView) findViewById(R.id.webview);
mWebView.getSettings().setAllowFileAccess(true);
mWebView.getSettings().setJavaScriptEnabled(true);
mWebView.getSettings().setBuiltInZoomControls(true);
String base = Environment.getExternalStorageDirectory().getAbsolutePath().toString();
String imagePath = "file://"+ base + "/test.jpg";
String html = "<html><head></head><body><img src=\""+ imagePath + "\"></body></html>";
mWebView.loadDataWithBaseURL("", html, "text/html","utf-8", "");

This did the trick as we have to append the"prefix "file://" before any file so as to display in the webview

edited Nov 01 '12 at 07:49

Hemant G

633
5
13

answered Feb 20 '11 at 05:46

xydev

3,409
5
34
54

6

It worked for me when I insert `mWebView.loadDataWithBaseURL("", content, "text/html","utf-8", "");` instead of `mWebView.loadData(html, "text/html","utf-8");` – Alexander Mironov Jun 29 '12 at 17:02
its not working.. We have replaced the url like this $\"img\"$ and using mWebView.loadDataWithBaseURL("", html, "text/html","utf-8", ""); – Dec 23 '15 at 10:47
Thank you, it worked like a charm! into my html " $\"\"$ " – Hermandroid May 05 '16 at 20:32
It worked for me too when I insert mWebView.loadDataWithBaseURL("", content, "text/html","utf-8", ""); instead of mWebView.loadData(html, "text/html","utf-8"); – Giovesoft May 16 '17 at 17:02
After reading the answer I still missed the loadDataWithBaseURL. Not sure what is different between the loadData and this. Anyways thank you – Ismail Iqbal Nov 16 '20 at 13:42

FoamyGuy · Answer 2 · 2011-02-19T15:46:25.783

2

WebViews can display HTML not images. You either need to use an ImageView or generate some HTML with an image tag that displays your picture. If it needs to be dynamic you can generate it as a String and use the loadData() method to display it.

Edit: You're going to want something like this in your html String.

String base = Environment.getExternalStorageDirectory().getAbsolutePath().toString(); 
String imagePath = base + "/test.jpg"; 
String html = ("<html>
                <head>
                </head>
                <body>
                <img src=\""+ imagePath + "\">
                </body>
                </html>
                "); 
mWebView.loadData(html, "text/html","utf-8");

edited Feb 19 '11 at 15:46

answered Feb 19 '11 at 15:18

FoamyGuy

46,603
18
125
156

You left the HTML String blank. I'll edit my answer to show an example in a moment. – FoamyGuy Feb 19 '11 at 15:40
Are you sure the path to your image is getting built correctly? Try Logging the imagePath string before you call loadData() and make sure the image is located where it shows in the Log. Also try adding some plain text into the html string inside the elements to see if that displays. If the text displays but not the pic its an issue with the file path. – FoamyGuy Feb 19 '11 at 16:01
@Tim i will look.. permission of image is ----rwxr-x .... if some texts are added it is easily displayed.. – xydev Feb 19 '11 at 16:04
@Tim String html = and String imagePath = /mnt/sdcard/test.jpg when logged – xydev Feb 19 '11 at 16:09
1

@Tim finally i was able to solve that we have to append file:/ before the base path to get the image loaded to the webview – xydev Feb 20 '11 at 05:48

Jorgesys · Answer 3 · 2018-02-01T23:49:09.720

I tried the methods mentioned before with no success, so this are the options that worked for me to load an image from the external storage:

Load the image directly into the WebView.

Supossing that i have an image called image.jpg inside the root of the external storage directory (in my case /storage/emulated/0/image.jpg) .

  String pathExternalStorage = Environment.getExternalStorageDirectory().getAbsolutePath().toString();
  String imagePath = pathExternalStorage + "/" + "imagen.jpg";

    /*

    //We can chek if the file really exists. 
    File archivo = new File(imagePath);
    if(archivo.exists()){
        Log.i("TAG" , "EXISTS " + imagePath);
    }else{
        Log.e("TAG" , "DOESN´T EXISTS " +imagePath );
    }
    */

  String imagePath = "file://" + imagePath;
  webView.loadUrl(imagePath);

Loading the image using a html template to load into theWebView.

 String pathExternalStorage = Environment.getExternalStorageDirectory().getAbsolutePath().toString();
 String imagePath = pathExternalStorage + "/" + "image.jpg";

String imagePathWV = "file://" + imagePath;
String html = ("<html><head></head><body><img src=\""+ imagePathWV + "\"></body></html>");
webView.loadDataWithBaseURL(null, html, "text/html","utf-8",null);

Load the image saved in sdcard in webview

3 Answers3

Linked