Android - webview 中的本地图像

Posted 2023-05-07

技术标签:

【中文标题】Android - webview 中的本地图像【英文标题】：Android - local image in webview 【发布时间】：2011-09-01 22:20:57 【问题描述】：

我正在尝试在我的网络视图中显示本地图像：

 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文件并将其放入assets文件夹并从assets文件夹访问它 【参考方案1】：

在 Webview 中加载 Html 文件并将您的图像放入资产文件夹并使用 Html 读取该图像文件。

<html>
  <table>
    <tr>
      <td>
        <img src="abc.gif"  >
      </td>
    </tr>
  </table>
</html>

现在在 Webview 中加载该 Html 文件

webview.loadUrl("file:///android_asset/abc.html");

【讨论】：

图片在asset的其他文件夹中怎么办？令人惊讶的是，这也适用于发布版本的应用。 .jpg图片无法加载，有没有其他更好的解决方案？ @Piyush Kukadiya 你这样使用 ` ` 或者都可以【参考方案2】：

你也可以试试

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

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

【讨论】：

我认为这是最快的方法，特别是如果您只需要显示一张图像。谢谢）我正在使用代码生成 html 文件，并且需要使用资产文件夹中的本地图像。尝试了其他方法，但没有奏效。你的工作完美。【参考方案3】：

一种方便的方法（经常被遗忘）是在 HTML 内容中使用 base64 嵌入图像。这也适用于移动 Webkit 浏览器（ios、Android..）。

使用这种方法的要点是您可以在 HTML 内容中嵌入图像，而不是与从 web 视图到受限文件系统的图像链接发生冲突。

  <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 时会产生开销。

【讨论】：

嗨，你能举一个完整的例子吗：此技术仅在 WebView 具有 loadDataWithBaseURl` 且基本 URL 不是 file://... 时才有用。【参考方案4】：

使用这个方法。

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

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

【讨论】：

这里有什么内容？内容是实际的 html 文本，例如 ... 【参考方案5】：

我认为您的代码中缺少\

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

【讨论】：

有两个“\”，eclipse不想编译：s我找到了一个解决方法：webview.loadDataWithBaseURL("fake://w/t/f", data, mimeType, encoding,空值）;似乎 loadData() 是错误的......【参考方案6】：

图片不会加载，除非你有：

webSettings.setAllowFileAccessFromFileURLs(true);

如果您使用的是 html 文件，它应该位于 /app/src/main 中名为“assets”的文件夹中。如果您没有该文件夹，请创建它。然后加载html文件：

myWebView.loadUrl("file:///android_asset/test.html");

如果你把图片和html文件放在同一个文件夹里，那么在html文件中你就可以正常做：

<img src='myimage.jpg' />

【讨论】：

【参考方案7】：

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

【讨论】：

【参考方案8】：

对我来说最好的方法是使用 MS word 中的所有文本和图像创建我的.html 文件，并将文件另存为.html 文件并将.html 文件和相应的附件文件夹复制到资产中文件夹并将资产文件夹中.html文件的地址提供给webview.loadUrl()... 这是您需要做的...

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

webview.loadUrl("file:///android_asset/learning1/learning1.htm");

【讨论】：

【参考方案9】：

Zain's solution 为我工作。我忘了添加我的文件夹 www 有 HTML 文件和 css 和图像等的其他子文件夹。

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

【讨论】：

【参考方案10】：

最简单直接的方法是使用像kompozer这样的html编辑器或任何你喜欢的东西来创建一个html文件。

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

预先在 html 文件中以某种方式更正图像的路径，即您只归档纯文件名。传递给 loadUrl 的文件名必须以 file:///android_asset/ 为前缀。

如果图片或文件无法加载，请检查文件名中的空白、连字符和其他奇怪的东西并更改文件名。

【讨论】：

【参考方案11】：

我知道问题已正确回答，但我会以有效的方式实施。

Step-1 在asset文件夹中创建一个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%" />
  </body>
</html>

第 2 步将您的图像放入资产文件夹中。（例如：yourimage.png）

Step-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放大缩小功能的全屏图像。

希望对你有帮助。

【讨论】：

以上是关于Android - webview 中的本地图像的主要内容，如果未能解决你的问题，请参考以下文章

通过 webview 显示的 Android 本地图像模糊

在 WebView 中加载页面之前，用本地 Android 资源替换 HTML 文档的图像

React Native - 如何从 WebView 上的本地路径加载图像

app中的webview是啥？如何理解？

Android WebView - 使用太多内存的图像

Android WebView 不会加载本地文件