使用存储在应用程序中的图像的本地路径将 Web 应用程序加载到 Web 视图中答案

【问题标题】：Load web-application into a webview using local paths for images stored in the application使用存储在应用程序中的图像的本地路径将 Web 应用程序加载到 Web 视图中
【发布时间】：2011-07-18 02:00:42
【问题描述】：

我希望能够创建一个使用 WebView 请求 url 的应用程序从返回 html 和 css 的外部 Web 应用程序引用作为实际应用程序中资产的图像。这想法基本上是加速一切，让图像永远不必被下载。

这是一个简化的例子：

服务器 HTML：

<html> 
  <head> 
  <style> 
     #myImage { background-image: url("file:///android_asset/myImage.jpg"; width: 50px; height: 50px;} 
  </style> 
  </head> 
  <body> 
    <div id="myImage"></div> 
  </body> 
</html>

那么，有没有办法做到这一点？我的主要目标是让应用程序从服务器请求所有 HTML，但能够将图像 url 映射到应用程序内的本地资源。

提前致谢，里昂

【问题讨论】：

告诉我 html 文件来自服务器或者它们在应用程序中是本地的。如果它们来自服务器，您如何使用资产文件夹中的图像。请更准确地询问。

标签： android url webview local assets

【解决方案1】：

为什么不从应用程序端加载所有 HTML？如果您担心此网页无法访问网络 - 请使用 WebView.loadDataWithBaseUrl 方法。

要将图像嵌入网页，您可以使用 data:URI 方案：http://en.wikipedia.org/wiki/Data_URI_scheme

即使您的页面是远程加载的，您也可以映射您的应用程序图像。您可以使用 WebView.loadUrl("javascript:....") 通过 JavaScript 代码“发送”图像数据（也使用 data:URI 方案）。

编辑。

首先，在 HTML 端，嵌入图像的示例将如下所示：

<html> 
  <head> 
  <style> 
     #myImage { background-image: url('data:image/png;base64,iVBORw0KG.....'); width: 50px; height: 50px;} 
  </style> 
  </head> 
  <body> 
    <div id="myImage"></div> 
  </body> 
</html>

如果你想在应用端存储这个页面，你可以将它存储在某个地方（字符串资源，资产文件夹）以及何时获取它。

String pageResource = // get it somehow
WebView myWebView;

myWebView.loadDataWithBaseUrl(
    "http://my.site.com",  // The base url
    pageResource,          // page content to load...
    "text/html",           // it's MIME type...
    "UTF-8",               // and encoding
    "http://my.site.com/page.html");

现在 WebView 已经加载了您的页面。它是从本地资源加载的，但从 WebView 的角度来看，它就像是从网络加载的一样。它也可以访问网络资源和在这里工作的 JavaScript 代码（这是 loadData 和 loadDataWithBaseUrl 之间的主要区别）。

【讨论】：

我不确定我是否理解你的意思。你能举个简单的例子吗？