Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to display image with WebView loaddata?

Tags:

android

I've got the following

String urlStr = "http://example.com/my.jpg"
String mimeType = "image/jpeg";
String encoding = null;
String pageData = ""; // This is data read in from an HttpURLConnection
webview.loadDataWithBaseURL(urlStr, pageData, mimeType, encoding, urlStr);

but when I run this, all I see is a blue question mark instead of my image. What is the proper way to handle displaying an image in a WebView with loadData?

Edit: Is there a way to do this without passing pageData as <img src="http://example.com/my.jpg/"> ? It seems silly that loadData takes a mime-type if it can only handle "text/html". Especially since the javadoc lists "image/jpeg" as an example mime-type that you might pass in.

like image 419
Carlos Rendon Avatar asked Mar 10 '11 23:03

Carlos Rendon


People also ask

Which method is used to load HTML content in WebView?

The loadUrl() and loadData() methods of Android WebView class are used to load and display web page.


2 Answers

It is possible to embedd the base64 encoded imagedata direct into the <img>-tag:

  <img src="data:image/jpeg;base64,base64DataHere" />

Here an example for creating the <img>-tag (I use an byte-array instead the String for raw-data, because in my tests an String as source didn't work - I assume that String can't handle binary-data):

  byte[] imageRaw = yourImage;
  String image64 = Base64.encodeToString(imageRaw, Base64.DEFAULT);
  String pageData = "<img src=\"data:image/jpeg;base64," + image64 + "\" />";

The Base64-class was introduced with API v.2.2 - for older API-versions you can copy the sourcefile from git and integrate it in your app. It should work with older API-versions.

Or you can use one of the alternative classes for base64-encoding like Base64Coder.


And here the complete working code for retrieving, converting and showing the image:

  byte[] imageRaw = null;
  try {
     URL url = new URL("http://some.domain.tld/somePicture.jpg");
     HttpURLConnection urlConnection = (HttpURLConnection) url.openConnection();

     InputStream in = new BufferedInputStream(urlConnection.getInputStream());
     ByteArrayOutputStream out = new ByteArrayOutputStream();

     int c;
     while ((c = in.read()) != -1) {
         out.write(c);
     }
     out.flush();

     imageRaw = out.toByteArray();

     urlConnection.disconnect();
     in.close();
     out.close();
  } catch (IOException e) {
     // TODO Auto-generated catch block
     e.printStackTrace();
  }

  String image64 = Base64.encodeToString(imageRaw, Base64.DEFAULT);

  String urlStr   = "http://example.com/my.jpg";
  String mimeType = "text/html";
  String encoding = null;
  String pageData = "<img src=\"data:image/jpeg;base64," + image64 + "\" />";

  WebView wv;
  wv = (WebView) findViewById(R.id.webview);
  wv.loadDataWithBaseURL(urlStr, pageData, mimeType, encoding, urlStr);
like image 168
MacGucky Avatar answered Oct 26 '22 07:10

MacGucky


Use this.. solve the problem of images load in webview.

    WebView  webView = (WebView)findViewById(R.id.webView1);
    webView.getSettings().setBuiltInZoomControls(true);
    webView.getSettings().setJavaScriptEnabled(true);

    String url ="Path of image";

    String imgSrcHtml = "<html><img src='" + url + "' /></html>";
    webView.loadData(imgSrcHtml, "text/html", "UTF-8");
like image 25
Sandy Avatar answered Oct 26 '22 08:10

Sandy