5

We want to display html page with its contents like text, images etc offline(without internet connection) in webview. We are able to display text only. For image, we are storing image on internal storage(sd card) from image url and replacing that image url(server url) with the image internal storage(sd card) path.

But, those images are not displaying in webview.

For example, Below is the img tag in html..

<img alt="img" class="center_top_img" src="http://test.com/uploads/section/images/523.jpg" />

We are replacing above image url(server url) with the image internal storage(sd card) path like

<img alt="img" class="center_top_img" src=\"file:///data/data/com.app.test/files/523.jpg\" />
  • Are you check the replacing path valid or not ? i.e File exist on the same path or not once check. If it valid then load data with base URL:==> webView.loadDataWithBaseURL("", html, "text/html","utf-8", ""); <== check here : http://stackoverflow.com/a/5055471/2983864 – Ravi Jaggarapu Dec 23 '15 at 10:17
  • Yes.. The path is valid. File exists there.We have replaced the url like this \"img\" And also used webView.loadDataWithBaseURL("", html, "text/html","utf-8", ""); But its not working.. –  Dec 23 '15 at 10:50
  • can u share your code ? – Ravi Jaggarapu Dec 23 '15 at 10:56
  • Using Environment.getExternalStorageDirectory() path, image displaying in webview but while using getFilesDir(), image is storing in the data/data/com.yourapp/files/ path but its not displaying.. Let me know if we are doing anything wrong. –  Dec 24 '15 at 06:55

4 Answers4

3

Wherever the image is, just get its absolute path and add "file://" in advance.

File file = ...
String imagePath + "file://" + file.getAbsolutePath();
String html = "...<img src=\""+ imagePath + "\">...";
Yingchen
  • 370
  • 5
  • 14
2

Try this

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", "");
Bhargav Thanki
  • 4,924
  • 2
  • 37
  • 43
  • Thanks for your answer.. But its not working.. We have replaced the url like this \"img\" –  Dec 23 '15 at 10:45
1

Remember you image is inside app directory. You can use this:

<img src="file:///data/data/com.yourapp/files/yourimage.jpg" />
josedlujan
  • 5,357
  • 2
  • 27
  • 49
  • Thanks for your answer.. Using Environment.getExternalStorageDirectory() path, image displaying in webview but while using getFilesDir(), image is storing in the data/data/com.yourapp/files/ path but its not displaying.. Let me know if we are doing anything wrong. –  Dec 24 '15 at 06:53
0

In my case I wanted the images to be in 'internal storage', not the sd-card as you stated in description (and also inferred from your usage of getExternalStorageDirectory - your question title however mentioned 'internal storage'. For this reason, get the right path:

//image paths; 'images' folder was earlier created by getFilesDir
String basePATH = "";
String imagePSPPath = "";
String imagePSP = "passportImage.jpeg"; //can be generated dynamically if needed
File images = new File(getApplicationContext().getFilesDir(), "images");
if(file.exists()) {
    //fine, it exists, build right strings
    basePATH = images.toString();
    imagePSPPath = basePATH +"/"+ imagePSP;
    Log.i("XPATH", imagePSPPath);   //loged for ease of copying
}else {
   //error, path not found
    Toast.makeText(YourActivity.this, "Sorry, path not found: ", Toast.LENGTH_LONG).show();
}

Next, use this path but also ensure that it has 3 forward slashes, not 2. For me, I just copied the XPATH address from LOG.i and pasted it in my Html page directly:

<img src="file:///"+imagePSPPath +" alt="PSP Photo">
Ajowi
  • 449
  • 3
  • 12