Load the Image Saved in Sdcard in Webview

Load the image saved in sdcard in webview

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

load images from sdcard in webview

the answer to your first question : [ How to load images from sdcard in to Webview ? ] Use this code and please read the comments :

wbView = (WebView) findViewById(R.id.wb);
        String SdCard = Environment.getExternalStorageDirectory().getAbsolutePath().toString();

        // Image path [List]
        // Path => [/storage/emulated/0/files.jpg, png , tiff and etc ...]
        String Jpg = "file://"+ SdCard + "/image1.jpg"; // First Image - Jpg format
        String Png = "file://"+ SdCard + "/image2.png"; // Second Image - Png format
        String Tiff = "file://"+ SdCard + "/image3.tiff"; // Third Image - Tiff format

        // Load Images [WebView content]
        String Html = 
        "<tr><td> First Image content : </td><img src=\""+Jpg+"\"height=\"130px"+"\"width=\"100%"+"\"></tr>" +
        "<br/><hr>" +
        "<tr><td> Second Image content : </td><img src=\""+Png+"\"height=\"130px"+"\"width=\"100%"+"\"></tr>"+
        "<br/><hr>" +
        "<tr><td> Third Image content : </td><img src=\""+Tiff+"\"height=\"130px"+"\"width=\"100%"+"\"></tr>";

        // local html
        wbView.loadDataWithBaseURL("",Html, "text/html","utf-8", "");

        //wbView.loadUrl(""); <== Do not use this !

Do not forget to add these permissions in your manifest file :

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

Output Image [WebView] :

Sample Image

And unfortunately I did not find the answer for your second question [Excel] , if I find a way, I'll tell you :)

Good luck.

Images from SD Card is not loaded in the WebView

Instead of using Environment.getExternalStorageDirectory I used the /sdcard/Downloads which seems to solve the problem. So the final HTML which I generated that worked is the following.

<html>
    <body>
        <img style="width:100%" src="file://sdcard/Download/Page1.jpg"/>
        <img style="width:100%" src="file://sdcard/Download/Page2.jpg"/>
        <img style="width:100%" src="file://sdcard/Download/Page3.jpg"/>
        <img style="width:100%" src="file://sdcard/Download/Page4.jpg"/>
    </body>
</html>

Loading an image from local android storage to WebView

So I found a solution to what I wanted to do and I'm posting an answer here if anyone someday wonders into this post and wants to know the solution.

Basically after taking a picture I call the javascript function which puts the taken image inside my .html file between <img></img> tags as the source.
This is my onActivityResult in MainActivity.java:

    @Override
    public void onActivityResult(int requestCode, int resultCode, Intent data) {
        super.onActivityResult(requestCode, resultCode, data);
        if (requestCode == PICK_IMAGE && resultCode == Activity.RESULT_OK) {
            //Getting the full image path of the image taken
            final String imagePath = "file://"+ currentPhotoPath;
            webView.post(new Runnable() {
                @Override
                public void run() {
                    webView.evaluateJavascript("postImage('" + imagePath + "')", null);
                }
            });
            getLocation();
            if (data == null) {
                //Display an error
                Log.d("performClick", "Error: data == null");
                return;
            }
        }
    }

What it does is it calls the javascript function postImage and passes imagePath as a parameter and the function in my hello.js file is:

function postImage(imagePath){
    document.body.innerHTML = "<img src=\""+ imagePath + "\">";
}

Now once I take the picture it appears on my WebView as an image without needing to reload the page or loading another URL with only the image.

Reading file from SD card and loading it to WebView

do this

File file = new File(Environment.getExternalStorageDirectory()+"/Reginfo/input/register.html");
    if (file.exists())
    {   
      index.loadUrl("file://"+Environment.getExternalStorageDirectory()+"/Reginfo/input/register.html");

dont forget to
add permissions to menifest

Load the Image Saved in Sdcard in Webview