android webview load image from local path

How to load local 开发者_StackOverflowimage 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?

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.

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!

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);

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.