android webview load image from local path

Question

How to load local image into web view? The content inside webview is coming from internet and I want to replace img src with my local drive path? Is it is possible?

Answer 1

Yup it is possible...! you can set your source in your html file like this

src="file://mnt/sdcard/images/panda.jpg"

and place your files on your

"sdcard/images" folder

OR

you could save your images on your assets folder and set your source on html to

file:///android_asset/panda.jpg

Note: Make sure your path is correct... or else it won't work.. :)

Cheers!

Answer 2

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

Then

String htmlData="<img src=logo.png>";

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

Answer 3

You will want to download the source and save the html file, I suggest you do this in memory using ByteArrayInputStream. Then open it and replace the "

You can also ask the downloader to download the html file using an intent.

A word of warning, do not download the file on your UI thread, you really don't want to stall it till the download finishes.

Answer 4

In the year of 2021, this is how I did it:

1. In MainActivity, define assetLoader:

    private lateinit var assetLoader: WebViewAssetLoader
   

2. In MainActivity.onCreate(), define the local directory you want to make available for webview asset loader:

        val publicDir: File = File(this.applicationContext.cacheDir, "public")
    assetLoader = WebViewAssetLoader.Builder()
        .setDomain("you website domain") 
        .addPathHandler("/public/", InternalStoragePathHandler(this.applicationContext, publicDir))
        .build()
   
    mWebView.webViewClient = object : WebViewClientCompat() {
        @RequiresApi(21)
        override fun shouldInterceptRequest(
            view: WebView,
            request: WebResourceRequest
        ): WebResourceResponse? {
            val res: WebResourceResponse? = assetLoader.shouldInterceptRequest(request.url)
            return res
        }
   
        // to support API < 21
        override fun shouldInterceptRequest(
            view: WebView,
            url: String
        ): WebResourceResponse? {
            return assetLoader.shouldInterceptRequest(Uri.parse(url))
        }
    }
   

3. Add onActivityResult() to MainActivity:

    override fun onActivityResult(requestCode: Int, resultCode: Int, data: Intent?) {
    super.onActivityResult(requestCode, resultCode, data)
    if (requestCode == CropImage.CROP_IMAGE_ACTIVITY_REQUEST_CODE) {
        val result = CropImage.getActivityResult(data)
        if (resultCode == RESULT_OK) {
            val resultUri: Uri = result.uri
            val filePath = resultUri.path
            // parse the filePath to find the directory and the file name. Note you may need to change the number 22 to some other number to find the delimiter / between the path and the file name.
            val index: Int = filePath!!.indexOf("com.your.package/cache") + 22
            val imageFileName = filePath.substring(index)
            val imageFile = File(filePath)
   
            // move the cropped image to the public subdirectory
            val publicFileDir = File(filePath.substring(0, index) + "public/")
            publicFileDir.mkdirs()
            imageFile.renameTo(File(publicFileDir, imageFileName))
   
            // change the image src in webview
            val imageUrl: String = "/public/" + imageFileName
            mWebView.evaluateJavascript("$('#image').attr('src', '$imageUrl');", null)
   
        } else if (resultCode == CropImage.CROP_IMAGE_ACTIVITY_RESULT_ERROR_CODE) {
            val error = result.error
            Toast.makeText(this@MainActivity, "Error in picking an image.", Toast.LENGTH_LONG).show()
        }
    }
   

   }

Note here I made "com.your.package/cache/public" an asset folder available to webview as "/public". In other words, webview will interpret https://your.domain/public/image_file as a local file at com.your.package/cache/public/image_file. The signficance of WebViewAssetLoader is that now your local file will be accessible via a URL in the same domain as your html file from you server, bypassing the Same Origin Policy (SOP) restriction.