Android Development: Using Image from Assets in a Webview's HTML

Android Development: Using Image From Assets In A WebView's HTML

Put your Logo into the assets directory eg: assets/logo.png

Then load your html with:

webView.loadDataWithBaseURL("file:///android_asset/", htmlData, "text/html", "utf-8", null);

Reference your img like:

<img src="logo.png">

android: how to using image in asset folder in html to load in webview

Try this way its working for me

public class MainActivity extends Activity {

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    String sHtmlTemplate = "<html><head></head><body><img src=\"file:///android_asset/ic_launcher.png\"><p>Hello Webview.</p></body></html>";
    WebView wb = new WebView(this);

    wb.loadDataWithBaseURL(null, sHtmlTemplate, "text/html", "utf-8",null);
    setContentView(wb);

}
}

Output:

Sample Image

Android: Load Large Image from Assets Using Webview

Found the answer from here:

https://stackoverflow.com/a/7480245/2060140

webview.getSettings().setBuiltInZoomControls(true);
webview.loadDataWithBaseURL("file:///android_asset/", "<img src='file:///android_res/drawable/example.png' />", "text/html", "utf-8", null);

Android - local image in webview

Load Html file in Webview and put your image in asset folder and read that image file using Html.

<html>
  <table>
    <tr>
      <td>
        <img src="abc.gif" width="50px" alt="Hello">
      </td>
    </tr>
  </table>
</html>

Now Load that Html file in Webview

webview.loadUrl("file:///android_asset/abc.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.

Images in Android assets subfolder do not display in WebView

After much frustration, I finally found out that I couldn't view this particular image on any Android device, even from the stock browser, despite it being what I thought was a normal JPG image.

I'm still not sure what was wrong with it, but when I opened it up in my photo editor and saved it again with normal JPG encoding, it worked. That includes when I reference it from the assets folder in my WebView.

Referencing image in assets from HTML not working

OK, I finally figured this out. Apparently there is a bug somewhere in the Android code where it fails if the image path has a space in it. So:

<img src="file:///android_asset/SkyInfo/images/Deep Sky/M13-Misti.jpg">

will fail to load the image. If you change it to:

<img src="file:///android_asset/SkyInfo/images/DeepSky/M13-Misti.jpg">

it will work (assuming you've renamed the directory).

Note:

this is only a problem when reading from the assets.
appears to be an issue with Android 4.x. I have encountered this issue on 4.0.4 and 4.3 versions but spaces work just fine in 2.3.x version.

Come on Google, spaces in directory names have been common for 15 years. Get with the program.

Android Development: Using Image from Assets in a Webview's HTML