Android中webview中的本地图片

60

我正在尝试在我的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");

这个方法有效,但我需要一个包含复杂网页而不仅仅是图片的解决方案。

有任何想法吗?


最好您创建一个 HTML 文件并将其放入资产文件夹中,并从资产文件夹访问它。 - Nishant Shah
11个回答

70

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

10
如果图片在资产的其他文件夹中,该怎么办? - Piyush Kukadiya
1
令人惊讶的是,这也适用于您应用程序的发布版本。 - Utkarsh Mankad
.jpg 图片无法加载,是否有其他更好的解决方案? - Gaurang Goda
@Piyush Kukadiya 你可以这样使用: <img src='b/ip.png' alt='Dart logo' width='152' height='152'> 或者 <img src='file:///android_asset/b/ip.png' alt='Dart logo' width='152' height='152'> 两种方式都可以。 - lava

51

你也可以尝试

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

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

我认为这是最快的方法,特别是如果你只需要显示一张图片。谢谢) - Dmitry Zaytsev
我正在使用代码生成HTML文件,并需要在资产文件夹中使用本地图像。尝试了其他方法,但它们都没有起作用。你的方法完美地解决了这个问题。 - Ray

28

一种方便的方式(常常被忽略)是在HTML内容中使用base64嵌入图像。这也适用于移动Webkit浏览器(IOS、Android等)。

使用此方法的重点在于您可以将图像嵌入到HTML内容中,而不必与来自Webview到受限文件系统的图像链接作斗争。

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

  xxxxx = base64 encoded string of images bytes

如果您想从文件系统提供(base64嵌入式)图像数据,您可以采取以下方式:

1)在Android中使用ContentProvider-它将提供基于base64格式的图像字符串。

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

2) 或者你可以使用JSOUP或类似的DOM解析器预处理HTML(在将其设置为webview之前),并使用正确的base64编码图像调整图像src。

这种方法的缺点是将图像转换为base64字符串所包含的开销以及将更大的HTML数据提供给webview所需的开销。


2
你好,你能给一个完整行的例子吗:<img src="content://.............."/>。 - Derzu
只有在WebView具有loadDataWithBaseURl方法且基本URL不是file://...时,此技术才有用。 - rds

8

使用这个方法。

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

folder.getAbsolutePath() 可能是 "file:///android_asset" 或者只是 "/"


(注:该方法返回文件夹的绝对路径,可能为应用程序资源文件夹或根目录)

1
这里的内容是什么? - jhegedus
内容是实际的HTML文本,如<html> ... </html> - Viren Savaliya

2
我认为你的代码中缺少一个\
   String data = "<body>" + "<img src=\\"file:///android_asset/large_image.png\"/></body>";      

1
有两个“\”时,Eclipse不想编译:s 我找到了一个解决方法: webview.loadDataWithBaseURL("fake://w/t/f", data, mimeType, encoding, null);似乎loadData()有问题... - Stéphane Piette

1

除非你具备以下条件,否则图片将无法加载:

webSettings.setAllowFileAccessFromFileURLs(true);

如果您正在使用HTML文件,则应将其放在/app/src/main下名为“assets”的文件夹中。如果您没有该文件夹,请创建它。然后使用以下方式加载HTML文件:
myWebView.loadUrl("file:///android_asset/test.html");

如果您将图像放在与html文件相同的文件夹中,则在html文件中,您只需执行正常操作:
<img src='myimage.jpg' />

0

我知道这个问题已经得到了正确的回答,但我打算以一种有效的方式实现它。

步骤1:在资产文件夹中创建一个HTML文件

ex:-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的全屏图像,带有缩放功能。

希望有所帮助。


0

enter image description here

 webView.loadDataWithBaseURL("file:///android_asset/", sourse, "text/html", "UTF-8", null);

0

最简单和直接的方法是使用类似于 kompozer 的 html 编辑器来创建一个 html 文件,或者您喜欢的其他编辑器。

将您的 html 文件放在 assets 文件夹中,并调用 webView.loadUrl(filename)。assets 文件夹还应包含您在 html 文件中引用的所有图片。

提前在 html 文件中正确设置图像的路径,以便您只需获取纯文件名。您传递给 loadUrl 的文件名必须以 file:///android_asset/ 为前缀。

如果图片或文件无法加载,请检查文件名是否有空格、连字符和其他奇怪的字符,并更改文件名。


0

Zain的解决方案对我有用。我忘记添加我的文件夹www,里面有HTML文件和其他的css和图像子文件夹。

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

..


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接