web-dev-qa-db-ja.com

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

これは機能しますが、写真だけでなく複雑なWebページが必要です。

何か案は ？

androidimagewebviewandroid-webview
53
Stéphane Piette

WebviewでHtmlファイルをロードし、画像をアセットフォルダーに入れ、Htmlを使用してその画像ファイルを読み取ります。

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

次に、WebviewでそのHTMLファイルをロードします

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

また試すことができます

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

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

1つの便利な方法（多くの場合忘れられています）は、HTMLコンテンツでbase64埋め込み画像を使用することです。これは、モバイルWebkitブラウザー（IOS、Android ..）でも機能します。

この方法を使用することのポイントは、webviewから制限されたファイルシステムへの画像リンクと戦う代わりに、HTMLコンテンツに画像を埋め込むことができることです。

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

  xxxxx = base64 encoded string of images bytes

ファイルシステムから（base64埋め込み）画像データを提供する場合は、たとえば次のことができます。

1）Android ContentContentを使用-base64形式の画像文字列を提供します。

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

2）または、JSOUPまたは同様のDOMパーサーでHTMLを前処理し（webviewに設定する前に）、適切にbase64エンコードされた画像で画像srcを調整できます。

この方法の短所は、画像をbase64文字列に変換する際のオーバーヘッドと、もちろん、より大きなHTMLデータをwebviewに変換する際のオーバーヘッドです。

26
noxo

この方法を使用してください。

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

folder.getAbsolutePath()は_"file:///Android_asset"_または単に_"/"_になります

8
Viren Savaliya

コードに\がないと思います

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

質問は正しく回答されていますが、効果的な方法で実装します。

ステップ-1アセットフォルダーにHTMLファイルを作成する

例：-imageLaod.html

注：ここでは、HTMLファイルにstyle = "width：100％"を指定してFullScreen Imageを実装しました

<!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）

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

完了です。 WebViewのズームイン/ズームアウト機能を備えたフルスクリーン画像を確認できます。

それが役に立てば幸い。

0
Gaurang Goda

enter image description here

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

私にとって最良のアプローチは、MS Wordのすべてのテキストと画像を含む_.html_ファイルを作成し、そのファイルを_.html_ファイルとして保存し、_.html_ファイルと対応する添付ファイルの両方をコピーすることでしたフォルダーをアセットフォルダーに入れ、アセットフォルダー内の.htmlファイルのアドレスをwebview.loadUrl()...に渡します...

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

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

最も簡単で簡単な方法は、kompozerなどのhtmlエディターでhtmlファイルを作成することです。

Htmlファイルをassetフォルダーに入れて、webView.loadUrl(filename)を呼び出します。アセットフォルダーには、htmlファイルで参照しているすべての画像も含まれている必要があります。

HTMLファイルで、純粋なファイル名のみをファイルするように、画像へのパスを事前に修正します。 loadUrlに渡すファイル名には、接頭辞としてfile:///Android_asset/。

画像またはファイルがロードされない場合、空白、ハイフン、およびその他の奇妙なもののファイル名を確認し、ファイル名を変更します。

0
Alfred Bamberger

Zainのソリューション 私のために働いた。 HTMLファイルとcssや画像などのその他のサブフォルダーを持つフォルダーwwwを追加するのを忘れました.

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

..

0
zeeawan