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);
Другие вопросы по тегам