I am trying to load html from filesDir using webview.loadDataWithBaseURL(baseUrl, htmlString). The relative paths in the HTML won't work hence it loads without styles, javascript and images.
The baseUrl that I am providing is file:///data/user/0/com.mydomain.app/files/folder/index.html The issue gets resolved when the baseUrl is changed to file:///android_asset/folder/index.html.
Note : Currently the assets are present in both android_asset as well as filesDir folders; but I am planning to remove the assets from android_asset folder.
In App file structure
main
assets
folder
index.html
utils
style.css
script.js
images
image.jpg
java
res
filesDir (Persistant Files) structure
com.mydomain.app
cache
files
folder
index.html
utils
style.css
script.js
images
image.jpg
Content of index.html is passed as htmlString.
<head>
<link rel="stylesheet" href="../utils/style.css"/>
</head>
<body>
<img src="../images/image.jpg"/>
<script src="../utils/script.css" />
</body>
I believe you need to call setAllowFileAccess in WebSettings to enable access to file:// URLs, as they're disabled by default in API 30 and above.
webview.getSettings().setAllowFileAccess(true);
Related
TLDR:
index.html file returns contents:null when I try to convert to apk file, but nothing else does.
I have a few files, index.html, index.js, and styles.css which are being used to code a simple game. I compress them, and the files remain untouched, but when i try to convert them to APK files, every file remains perfect except the index.html file which returns contents:null when i try to view it. I cannot find the issue and am not sure why converting an HTML file to APK will corrupt it. Any ideas as to why this might happen, such as an error in the actual HTML file?
If you must see it, here is the code:
<!DOCTYPE HTML>
<html>
<head>
<link href='styles.css' rel='stylesheet'>
<script src='functions.js' type='text/javascript'></script>
<script src='index.js' type='text/javascript'></script>
</head>
<body>
</body>
</html>
I see no reason to include the body HTML as it does not affect the file.
TLDR:
index.html file returns contents:null when I try to convert to apk file, but nothing else does.
I have a folder that is saved to device internal memory and I want to display html content (with images, .css styles and other things that we found on regular websites but not using any internet connection). So all the necessary resources exist in that folder (images in img folder styles in css folder and so on...) Here's how the content of folder looks like
and here how I load data to webview
fun showWebsite(fileName: String) {
post { loadDataWithBaseURL(path, reader.readFileContext(fileName), "text/html", "UTF-8", null) }
}
Here how I get path
private val ref = WeakReference(context)
var path: String? = null
init {
path = ref.get()?.filesDir?.absolutePath + File.separator
}
Here's path value /data/user/0/com.web.webdemo/files/
I load data to webview using loadDataWithBaseURL method and I pass the path to web folder in internal storage. The thing is that I can see the content of specific html file except for images and styles. So why is that? What I'm doing wrong?
EDIT1
here's my html content
<!DOCTYPE html>
<html>
<head>
<script src="js/lib.js"></script>
<link rel="stylesheet" type="text/css" href="css/theme.css">
</head>
<body>
Hello Start
<img src="img/test.png" alt="super image">
<button onclick="next()">Press me</button>
</body>
</html>
EDIT2
OK, so I solved one part of problem. Now my css styles are loaded. I added "file://" to baseUrl Full code
loadDataWithBaseURL("file://" + reader.path, reader.readFileContext(fileName), "text/html", "UTF-8", null)
But images is still missing :/
I am working on an application in Android, where I am using a local html file which includes css files, but It won't work and I have no Idea why.
The Java code is like this:
view.loadDataWithBaseURL("file:///android_asset/", content, "text/html", "UTF-8", null);
The HTML code is like this
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<title>Starter Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="../css/main.css" rel="stylesheet">
<style>
</style>
The path is correct, Eclipse WebBrowser shows the html Page correct but if I test it on my Device it's without styles.
The Logcat throws the Error "Unknown Chromium Error: -6"
Thanks a lot in advance
you cannot refer to this path inside a webview. you probably need to store your css file in assets folder and refer to it dynamically:
put CSS in assets folder, do your manipulation with HTML, but refer to CSS by relative path, and load HTML to WebView by loadDataWithBaseURL() method:
webView.loadDataWithBaseURL("file:///android_asset/", htmlString, "text/html", "utf-8", null);
E.g. you have styles.css file, put it to assets folder, create HTML and load it:
StringBuilder sb = new StringBuilder();
sb.append("<HTML><HEAD><LINK href=\"styles.css\" type=\"text/css\" rel=\"stylesheet\"/></HEAD><body>");
sb.append(tables.toString());
sb.append("</body></HTML>");
webView.loadDataWithBaseURL("file:///android_asset/", sb.toString(), "text/html","utf-8", null);
from: WebView, add local .CSS file to an HTML page?
On a related note, if you're not storing the file in the assets folder and want to use relative paths, Webview on Android sometimes requires dot-slash before relative paths.
<LINK href="./styles/file.css" type="text/css" rel="stylesheet">
See this post
In your case the error -6 means FILE_NOT_FOUND, which probably due to access permission issue on your device.
You may need to put the CSS file under the same folder of your HTML files. For security consideration, webkit engine will apply same-domain policy when accessing local files. i.e. accessing sub-resource files (such as CSS, JS, images) that are not in the same folder of your main HTML file is not allowed.
I'm trying to diplay a local image in my webview :
String data = "<body>" + "<img src=\"file:///android_asset/large_image.png\"/></body>";
webview.loadData(data, "text/html", "UTF-8");
This code doesn't display anything, instead of :
webview.loadUrl("file:///android_asset/large_image.jpg");
This one works, but I need to have complex web page, not just a picture.
Any ideas ?
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");
You can also try
String data = "<body>" + "<img src=\"large_image.png\"/></body>";
webView.loadDataWithBaseURL("file:///android_asset/",data , "text/html", "utf-8",null);
One convenient way (often forgotten) is to use base64 embedded images in HTML content. This will also work on mobile Webkit browsers (IOS, Android..).
Point of using this method is that you can embed images on HTML content, instead of fighting with image links from webview to restricted filesystem.
<img src="data:image/jpg;base64,xxxxxxxxxxxxxxxxxxxxxxxxxxxx"/>
xxxxx = base64 encoded string of images bytes
If you want to provide (base64 embedded) image data from filesystem, you can for example:
1) In Android use ContentProvider - which will provide base64 formatted image strings.
<img src="content://.............."/>
2) Or you can preprocess HTML with JSOUP or similar DOM parser (before setting it to webview) and adjust image src with properly base64 encoded image.
Disadvantages of this method is overhead included in converting image to base64 string and of course in proding larger HTML data to webview.
Use this method.
mview.loadDataWithBaseURL(folder.getAbsolutePath(), content, "text/html", "windows-1252", "");
folder.getAbsolutePath() can be "file:///android_asset" or just "/"
I think there is a \ missing in your code
String data = "<body>" + "<img src=\\"file:///android_asset/large_image.png\"/></body>";
The image will not load unless you have:
webSettings.setAllowFileAccessFromFileURLs(true);
If you are using a html file, it should be in a folder called "assets" in /app/src/main. If you don't have that folder then make it. Then load the html file with:
myWebView.loadUrl("file:///android_asset/test.html");
If you put the image in the same folder as the html file, then in the html file you can just do a normal:
<img src='myimage.jpg' />
webView.loadDataWithBaseURL("file:///android_asset/", sourse, "text/html", "UTF-8", null);
the best approach for me was to create my .html file with all the texts and images in MS word, and save the file as an .html file and copying both .html file and the corresponding attachments folder into assets folder and giving the address of .html file in asset folder to webview.loadUrl()...
Here is what you need to Do...
WebView webview = (WebView) findViewById(R.id.webView1);
webview.loadUrl("file:///android_asset/learning1/learning1.htm");
Zain's solution worked for me. I forgot to add my folder www having HTML files and other subfolders of css and images etc.
webView.loadDataWithBaseURL("file:///android_asset/www/",data , "text/html", "utf-8",null);
..
The most simple and straightforward way is to create a html file with a html editor like kompozer or whatever you like.
Put your html file in the assets folder and call webView.loadUrl(filename). The assets folder should also contain all pictures which you are referencing in your html files.
Correct in advance in the html file the path to your images in a way, that you only file down the pure filename. The file name you pass to loadUrl must be prefixed with file:///android_asset/.
If the picture or file does not load, check the filenames for blanks, hyphen and other weird stuff and change the filenames.
I Know the Question is answered correctly, but I am going to implement in an effective way.
Step-1 make an HTML file in asset folder
ex:-imageLaod.html
Note: Here In HTML file we have implemented FullScreen Image by giving style="width:100%"
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<title>Load Image</title>
<style type="text/css">
h3{
color:blue;
}
</style>
</head>
<body>
<h3>This image loaded from app asset folder.</h3>
<img src="yourimage.png" style="width:100%" alt="companylogo"/>
</body>
</html>
Step-2 put your image in the asset folder. (ex:yourimage.png)
Step-3 put below code in java file.
String folderPath = "file:android_asset/";
String fileName = "loadImage.html";
String file = folderPath + fileName;
WebView webView = findViewById(R.id.webview)
webView.getSettings().setBuiltInZoomControls(true);
webView.getSettings().setDisplayZoomControls(false);
webView.loadUrl(file);
and it is done. you can see the fullscreen image with zoom in-zoom out feature of WebView.
Hope it helps.
I would like to know how I can display a HTML page in webview with references to relative/local images. The goal is to have the html page and all linked images contained in the android application package itself.
Where would I need to place the assets (assets directory?) and how do I reference these so they load into the webview?
Thanx!
Sven
You can put all html and images to assets directory, like:
assets\html\
index.html
image1.png
image2.jpg
All references to the images in the html file should be in form of file:// url
<html>
<body>
<img src="file:///android_asset/html/image1.png">
<img src="file:///android_asset/html/image2.jpg">
</body>
</html>
After all, just load this HTML to WebView as usual:
webView.loadUrl("file:///android_asset/html/index.html");