Android - локальное изображение в webview
Я пытаюсь отобразить локальное изображение в моем веб-просмотре:
String data = "<body>" + "<img src=\"file:///android_asset/large_image.png\"/></body>";
webview.loadData(data, "text/html", "UTF-8");
Этот код ничего не отображает, вместо:
webview.loadUrl("file:///android_asset/large_image.jpg");
Это работает, но мне нужна сложная веб-страница, а не просто картинка.
Есть идеи?
10 ответов
Загрузите HTML-файл в Webview, поместите ваше изображение в папку ресурсов и прочитайте этот файл изображения с помощью Html.
<html>
<table>
<tr>
<td>
<img src="abc.gif" width="50px" alt="Hello">
</td>
</tr>
</table>
</html>
Теперь загрузите этот HTML-файл в Webview
webview.loadUrl("file:///android_asset/abc.html");
Вы также можете попробовать
String data = "<body>" + "<img src=\"large_image.png\"/></body>";
webView.loadDataWithBaseURL("file:///android_asset/",data , "text/html", "utf-8",null);
Один удобный способ (часто забытый) состоит в использовании встроенных изображений base64 в HTML-контенте. Это также будет работать в мобильных браузерах Webkit (IOS, Android..).
Смысл использования этого метода заключается в том, что вы можете встраивать изображения в контент HTML, а не бороться со ссылками на изображения из веб-просмотра в ограниченную файловую систему.
<img src="data:image/jpg;base64,xxxxxxxxxxxxxxxxxxxxxxxxxxxx"/>
xxxxx = base64 encoded string of images bytes
Если вы хотите предоставить (встроенные в base64) данные изображения из файловой системы, вы можете, например:
1) В Android используйте ContentProvider - который будет предоставлять строки изображений в формате base64.
<img src="content://.............."/>
2) Или вы можете предварительно обработать HTML с помощью JSOUP или аналогичного анализатора DOM (перед настройкой его для веб-просмотра) и настроить src для изображения с помощью надлежащим образом закодированного в base64 изображения.
Недостатки этого метода заключаются в дополнительных затратах при преобразовании изображения в строку base64 и, конечно, при передаче больших HTML-данных в веб-просмотр.
Используйте этот метод.
mview.loadDataWithBaseURL(folder.getAbsolutePath(), content, "text/html", "windows-1252", "");
folder.getAbsolutePath()
может быть "file:///android_asset"
или просто "/"
Я думаю, что есть \
отсутствует в вашем коде
String data = "<body>" + "<img src=\\"file:///android_asset/large_image.png\"/></body>";
Изображение не загрузится, если у вас нет:
webSettings.setAllowFileAccessFromFileURLs(true);
Если вы используете html-файл, он должен находиться в папке с именем "assets" в /app/src/main. Если у вас нет этой папки, сделайте это. Затем загрузите html-файл с помощью:
myWebView.loadUrl("file:///android_asset/test.html");
Если вы поместите изображение в ту же папку, что и файл html, то в файле html вы можете просто сделать обычный:
<img src='myimage.jpg' />
Самый простой и простой способ - создать HTML-файл с помощью HTML-редактора, такого как kompozer
или что угодно.
Поместите свой HTML-файл в папку ресурсов и вызовите webView.loadUrl(filename)
, Папка активов также должна содержать все изображения, на которые вы ссылаетесь в своих html-файлах.
Заранее исправьте в html-файле путь к вашим изображениям таким образом, чтобы вы указывали только чистое имя файла. Имя файла, которое вы передаете loadUrl, должно иметь префикс file:///android_asset/
,
Если изображение или файл не загружается, проверьте имена файлов на наличие пробелов, дефисов и других странных вещей и измените имена файлов.
Лучший подход для меня был создать мой .html
файл со всеми текстами и изображениями в MS Word, и сохраните файл как .html
файл и копирование обоих .html
файл и соответствующую папку вложений в папку активов и давая адрес файла.html в папке активов webview.loadUrl()
... вот что нужно сделать...
WebView webview = (WebView) findViewById(R.id.webView1);
webview.loadUrl("file:///android_asset/learning1/learning1.htm");
Решение Зейна сработало для меня. Я забыл добавить свою папку www, содержащую HTML-файлы и другие подпапки CSS и изображений и т. Д.
webView.loadDataWithBaseURL("file:///android_asset/www/",data , "text/html", "utf-8",null);
..
Я знаю, что на вопрос дан правильный ответ, но я собираюсь эффективно его реализовать.
Шаг-1 сделать HTML-файл в папке ресурсов
например:-imageLaod.html
Примечание: здесь В HTML-файле мы реализовали полноэкранное изображение, указав 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>
Шаг-2 поместите ваше изображение в папку активов. (Например:yourimage.png)
Шаг-3 поместите приведенный ниже код в Java-файл.
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);
и это сделано. Вы можете увидеть полноэкранное изображение с функцией увеличения и уменьшения масштаба в WebView.
Надеюсь, поможет.
webView.loadDataWithBaseURL("file:///android_asset/", sourse, "text/html", "UTF-8", null);