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 + "\"
Related
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  
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/…
I download the image and store in the local storage. I load this image from the html file from local storage.
<img src="file:///data/data/com.example/imagefiles/photo.jpg"/>
I load the html file from WebView.
webView.loadUrl("file:///android_asset/show_download_image.html");
But the image didn't shown. I am sure the downloading image is successful.
I want to know that is it possible to load the image from local storage into the html file or is there any way to load the image from local?
Thanks.
Why not try to load image directly like this:
String base = Environment.getExternalStorageDirectory().getAbsolutePath().toString();
String imagePath = "file://"+ base + "/photo.jpg";
String html = "<html><head></head><body><img src=\""+ imagePath + "\"></body></html>";
webView.loadDataWithBaseURL("", html, "text/html","utf-8", "");
Here the image is in sd card. You can change the code for keeping image in asset also.
check your webview javaScriptEnabled is true?
WebView.getSettings().setJavaScriptEnabled(true);
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"
I create webview in code. In this webview I show pictures. Now I have two questions. How I can show image in full size, because my pictures has resolution 1381x1829 and I see only part of this picture. And second. As you can see in code I load pictures from assets, but I want to load pictures from sd card. How I can do that?
This is code:
WebView web = new WebView(getContext());
web.getSettings().setJavaScriptEnabled(true);
web.getSettings().setBuiltInZoomControls(true);
web.loadUrl("file:///android_asset/lj.png");
addView(web);
this solution works perfectly for me :
webView.setInitialScale(30);
WebSettings webSettings = webView.getSettings();
webSettings.setUseWideViewPort(true);
This method webview.getSettings().setBuiltInZoomControls(true) will let you implement build in zoom control for non-multitletouch screen
You can load image from anywhere from sdcard to webview using this code.
That is if u want to load multiple image from multiple location.
String base = Environment.getExternalStorageDirectory().getAbsolutePath().toString() + "/Your/Folder";
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 if u want to load images exist under the same parent folder, this will do the trick
String imagePath = "test.jpg";
String html = "<html><head></head><body><img src=\""+ imagePath + "\"></body></html>";
mWebView.loadDataWithBaseURL("file:///mnt/sdcard/Your/Folder/", html, "text/html","utf-8",null);
BE WARN, if u try to load hi-res image like 1600x1840 to webview, webview WILL reduced image res to maintain memory usage, which result in BAD looking image
Add this to your HTML :
<style type='text/css'>
img {max-width: 100%;height:initial;} div,p,span,a {max-width: 100%;}
</style>
This will make your images scale to fit the screen size.
For remove default padding - don't forget set style:
<html><head></head><body style="padding:0; margin:0;"><img src=""+ gifUrl + ""
width="100%"></body></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