Path of image in html file when i load on android webview - android

I have some html content which has to be displayed on android webview. Here is my code to display the content on webview
myBrowser.loadDataWithBaseURL("", myFormHTMLContent , "text/html", "UTF-8", null);
I have few img tags in html content. How can i specify the src for those? I tried this .. src = "/mnt/sdcard/myDir/test.gif". But its not loading that image. Please help me.

Try this.
src = Environment.getExternalStorageDirectory().getPath()+"myDir/test.gif"

Related

Images not loading when JavaScriptEnabled in android webview

I have a android web view
webview = FindViewById<WebView>(Resource.Id.webView);
I load the htmlData from the url like so:
webview.LoadDataWithBaseURL("file:///android_asset/", htmlData, "text/html", "UTF-8", null);
The content includes text, images and embedded youtube videos.
In the case above the text and images load correctly but not the videos as i have not enabled Javascript yet.
Therefore i enable JavaScriptEnabled.
webview.Settings.JavaScriptEnabled = true;
webview.Settings.DomStorageEnabled = true;//This does not make any difference
However, when i do enable Javascript the images no longer load within my webview but the videos do.
After debugging, I can see that the entire image tag is being replaced with &nbsp
So i would like to know how to have javascript enabled and have my images still load within my htmldata at the same time.
I guess JavaScript may change the src attribete of img tag.
You can do RemoteDebug of webview. Let's check the html dom.
developers.google.com/web/tools/chrome-devtools/debug/…

images in not loading in webview Android

I have a issue in loading images in the webview. the normal images in the src tags are loading perfectly .but there is an custum image tag.
<img class=\"lazy lazy-hidden aligncenter size-full wp-image-40307\" src=\"data:image/gif;base64,R0lGODdhAQABAPAAAP///wAAACwAAAAAAQABAEACAkQBADs=\" data-lazy-type=\"image\" data-lazy-src=\"http://www.hdwallpapersimages.com/wp-content/uploads/2014/01/Winter-Tiger-Wild-Cat-Images.jpg\" alt=\"yoyo\" width=\"600\" height=\"400\" title=\"Title\" />
i am loding the data in the webview like below
news_deatilsWv
.loadDataWithBaseURL(null, dataString, "text/html", "UTF-8", null)
dataString contain the the entire html data which i displayed, only this custom image portion is not loading.i search the web and found it is related t the base 64 encoding but cant find how to fix this. can any one suggest an idea or solution to fix this problem.

WebView loadDataWithBaseURL not working for files in app folder

In my local storage I have the following folder
/data/data/com.test.testapp/files/1/images
and the following file exists.
/data/data/com.test.testapp/files/1/images/f.png
These were stored/retrieved using context.getApplicationContext().getFilesDir()
In my HTML I have "<img src="f.png" />"
I can get TextView working with html/images using an ImageGetter, which effectively returns a drawable from:
Drawable.createFromPath(targetFile.getAbsolutePath());
Where the targetFile is as described above ends up being (/data/data/com.test.testapp/files/1/images/f.png)
However, when I try to use WebViewer as follows (I've pasted in the string for ease):
String url = "file:///data/data/com.test.testapp/files/1";
webViewer.loadDataWithBaseURL(url, content, "text/html", "utf-8", null);
Where content ends up with the same text as my TextView.
All I get is an image placeholder, i.e. it didn't find it.
OMG! ;)
How petty are those people at Google!
All I had to do was append a slash to the url so the base url:
file:///data/data/com.test.testapp/files/1
When changed to
file:///data/data/com.test.testapp/files/1/
Works.

Using webView's loadDataWithBaseURL not loading images from sdcard

I would like to set some html content in my webview with some pictures.
I've read on the internet i must use loadDataWithBaseUrl to do such a thing because i need to link the folder of images (basUrl) in order.
My html content nicely loads, i can even ran the javascripts perfectly, but for some reason my images cannot be loaded.
Somewhere i've read there are some security reasons and thats why i cant load images from sd card to webview and some says it can be easily done via loadDataWithBaseUrl, so i really dont know which one is true.
Here is my method i tried, maybe with some mistakes so dont be rude:
I got my html file here:
mnt/sdcard/com.mypackage.myproject/3/3.html
My images are here:
mnt/sdcard/com.mypackage.myproject/3/images/Cover.png
And this is my content loading:
myWebView.loadDataWithBaseURL("file:///mnt/sdcard/com.mypackage.myproject/3", myHtml, "text/html", "utf-8", "");
In my html code:
<img src="images/Cover.png" alt="Cover.png" height="820"/>
So as you see i give the baseUrl, and for some reason the webview cannot load my images.
As many said, this can be a solution:
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.loadData(html, "text/html","utf-8");
BUT, i have 700 different html files and there are many images in many different places... so i cannot modify the html code.
Is there a way to link the image folder to my html files to properly use them as a baseUrl?
You have a syntax error in your loading statement. You have to put : after file
myWebView.loadDataWithBaseURL("file:///mnt/sdcard/com.mypackage.myproject/3", myHtml, "text/html", "utf-8", "");
You don't need to put full path of your image into html.
img src="images/test1.jpg"
Instead
img src=\""+ imagePath + "\"

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

In my app I'm making a basic HTML help document.
I wanted my app's logo in the HTML img tag itself, but I don't know how I'd reference to the logo which will be stored in assets.
Is this possible, if so how?
Thanks for the help!
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">
Store the images in assets folder:
Read the image in the html from assets with file:///android_asset/
for example:
String sHtmlTemplate = "<html><head></head><body><img src=\"file:///android_asset/img/mybadge.png\"></body></html>";
load inside the WebView:
webView.loadDataWithBaseURL(null, sHtmlTemplate, "text/html", "utf-8",null);
You can reference assets with this URL syntax:
file:///android_asset/YourAssetFilename
dump them into assets folder and just put in the html
<img src="filename.png">
simple as that
Put your Logo into the assets directory
Example : assets/logo.png
Then
String imgData="<img src=home.png>";
webView.loadDataWithBaseURL("file:///android_asset/", imgData, "text/html", "utf-8", null);
Consider we have placed an image your_image.png in assets/imgs.
In earlier versions of android you can directly access images like below.
webView.loadData("<img src='file:///android_asset/imgs/your_image.png'/>",
"text/html", "UTF-8");
But can't access files directly in latest versions due to added security concerns. for the latest versions we need to use WebViewAssetLoader. refer the below code.
Helper class to load local files including application's static assets and resources using http(s):// URLs inside a WebView class. Loading local files using web-like URLs instead of "file://" is desirable as it is compatible with the Same-Origin policy.
final WebViewAssetLoader assetLoader = new WebViewAssetLoader.Builder()
.addPathHandler("/assets/", new WebViewAssetLoader.AssetsPathHandler(this))
.build();
webView.setWebViewClient(new WebViewClient() {
#Override
public WebResourceResponse shouldInterceptRequest(WebView view,
WebResourceRequest request) {
return assetLoader.shouldInterceptRequest(request.getUrl());
}
});
webView.loadData("<img src='https://appassets.androidplatform.net/assets/imgs/your_image.png'/>",
"text/html", "UTF-8");
for more information please refer android dev portal links
https://developer.android.com/reference/androidx/webkit/WebViewAssetLoader
https://developer.android.com/jetpack/androidx/releases/webkit?fireglass_rsn=true

Categories

Resources