web-dev-qa-db-ger.com

Android - lokales Bild im Webview

Ich versuche ein lokales Bild in meiner Webansicht darzustellen:

 String data = "<body>" + "<img src=\"file:///Android_asset/large_image.png\"/></body>";
 webview.loadData(data, "text/html", "UTF-8");

Dieser Code zeigt nichts an, anstatt:

 webview.loadUrl("file:///Android_asset/large_image.jpg");

Dies funktioniert, aber ich muss eine komplexe Webseite haben, nicht nur ein Bild.

Irgendwelche Ideen ?

androidimagewebviewandroid-webview
53
Stéphane Piette

Laden Sie die HTML-Datei in Webview, legen Sie Ihr Bild in den Asset-Ordner und lesen Sie diese Bilddatei mit HTML.

<html>
  <table>
    <tr>
      <td>
        <img src="abc.gif" width="50px" alt="Hello">
      </td>
    </tr>
  </table>
</html>

Laden Sie jetzt diese HTML-Datei in Webview

webview.loadUrl("file:///Android_asset/abc.html");
66
Sanjay Patel

Sie können es auch versuchen

String data = "<body>" + "<img src=\"large_image.png\"/></body>";

webView.loadDataWithBaseURL("file:///Android_asset/",data , "text/html", "utf-8",null);
46
Zain Ali

Ein praktischer Weg (oft vergessen) ist die Verwendung von in Base64 eingebetteten Bildern in HTML-Inhalten. Dies funktioniert auch auf mobilen Webkit-Browsern (IOS, Android ..).

Bei dieser Methode sollten Sie Bilder in HTML-Inhalte einbetten, anstatt mit Bildverknüpfungen von der Webansicht zum eingeschränkten Dateisystem zu kämpfen.

  <img src="data:image/jpg;base64,xxxxxxxxxxxxxxxxxxxxxxxxxxxx"/>

  xxxxx = base64 encoded string of images bytes

Wenn Sie (base64 embedded) Bilddaten aus dem Dateisystem bereitstellen möchten, können Sie zum Beispiel:

1) In Android verwenden Sie ContentProvider, der Base64-formatierte Bildzeichenfolgen bereitstellt. 

<img src="content://.............."/>

2) Oder Sie können HTML mit JSOUP oder einem ähnlichen DOM-Parser vorverarbeiten (bevor Sie Webview einstellen) und image src mit einem ordnungsgemäß base64-kodierten Bild anpassen.

Nachteile dieser Methode sind der Overhead, der beim Konvertieren eines Bildes in eine Base64-Zeichenfolge und natürlich beim Prodieren größerer HTML-Daten in die Webansicht enthalten ist. 

26
noxo

Verwenden Sie diese Methode.

mview.loadDataWithBaseURL(folder.getAbsolutePath(), content, "text/html", "windows-1252", "");

folder.getAbsolutePath() kann "file:///Android_asset" sein oder nur "/"

8
Viren Savaliya

Ich denke, dass in Ihrem Code ein \ fehlt

   String data = "<body>" + "<img src=\\"file:///Android_asset/large_image.png\"/></body>";
2
Tanmay Mandal

Ich weiß, dass die Frage richtig beantwortet wurde, aber ich werde sie effektiv umsetzen.

Schritt 1: Erstellen Sie eine HTML-Datei im Asset-Ordner

beispiel: -imageLaod.html

Hinweis: Hier in der HTML-Datei haben wir FullScreen Image implementiert, indem Sie 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>

Schritt 2: Legen Sie Ihr Bild in den Asset-Ordner. (ex: yourimage.png)

Schritt 3: Geben Sie den Code in die Java-Datei ein.

    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);

und es ist fertig. Sie können das Vollbild mit der Funktion zum Vergrößern und Verkleinern von WebView sehen.

Ich hoffe es hilft.

0
Gaurang Goda

enter image description here

 webView.loadDataWithBaseURL("file:///Android_asset/", sourse, "text/html", "UTF-8", null);
0
Georgy Gobozov

der beste Ansatz für mich war, meine .html-Datei mit allen Texten und Bildern in MS Word zu erstellen, die Datei als .html-Datei zu speichern und sowohl die .html-Datei als auch den entsprechenden Anhangsordner in den Assets-Ordner zu kopieren und die Adresse der .html-Datei anzugeben Im Asset-Ordner zu webview.loadUrl()....__ Folgendes müssen Sie tun ...

WebView webview = (WebView) findViewById(R.id.webView1);

webview.loadUrl("file:///Android_asset/learning1/learning1.htm");
0
Arash Parsayar

Die einfachste und einfachste Möglichkeit besteht darin, eine HTML-Datei mit einem HTML-Editor wie kompozer oder einem beliebigen anderen Element zu erstellen. 

Legen Sie Ihre HTML-Datei im Assets-Ordner ab und rufen Sie webView.loadUrl(filename) auf. Der Assets-Ordner sollte auch alle Bilder enthalten, auf die Sie in Ihren HTML-Dateien verweisen. 

Korrigieren Sie vorab in der HTML-Datei den Pfad zu Ihren Bildern so, dass Sie nur den reinen Dateinamen ablegen. Dem Dateinamen, den Sie an loadUrl übergeben, muss file:///Android_asset/ vorangestellt werden. 

Wenn das Bild oder die Datei nicht geladen wird, überprüfen Sie die Dateinamen auf Leerzeichen , Bindestrich und andere seltsame Dinge und ändern Sie die Dateinamen.

0
Alfred Bamberger

Zains Lösung arbeitete für mich. Ich habe vergessen, meinen Ordner www mit HTML-Dateien und anderen Unterordnern von CSS und Bildern usw. hinzuzufügen. 

webView.loadDataWithBaseURL("file:///Android_asset/www/",data , "text/html", "utf-8",null);

..

0
zeeawan