20

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

3 Answers 3

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

5
  • 6
    It worked for me when I insert mWebView.loadDataWithBaseURL("", content, "text/html","utf-8", ""); instead of mWebView.loadData(html, "text/html","utf-8"); Jun 29, 2012 at 17:02
  • its not working.. We have replaced the url like this <img alt=\"img\" class="center_top_img" src=\"file:///data/data/com.app.test/files/1450867325060.jpg\"> and using mWebView.loadDataWithBaseURL("", html, "text/html","utf-8", "");
    – user4928952
    Dec 23, 2015 at 10:47
  • Thank you, it worked like a charm! into my html "<img width=\"256\" height=\"100\" title=\"logo tienda\" alt=\"\" src=\"" + "file://path_to_mi_img" + "\">" May 5, 2016 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, 2017 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 Nov 16, 2020 at 13:42
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");
5
  • You left the HTML String blank. I'll edit my answer to show an example in a moment.
    – FoamyGuy
    Feb 19, 2011 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 <body> elements to see if that displays. If the text displays but not the pic its an issue with the file path.
    – FoamyGuy
    Feb 19, 2011 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, 2011 at 16:04
  • @Tim String html = <html><head></head><body><img src="/mnt/sdcard/test.jpg"></body></html> and String imagePath = /mnt/sdcard/test.jpg when logged
    – xydev
    Feb 19, 2011 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, 2011 at 5:48
1

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);

enter image description here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.