在 WebView 中使用本地图像渲染本地 HTML 文件
Posted
技术标签:
【中文标题】在 WebView 中使用本地图像渲染本地 HTML 文件【英文标题】:Rendering a local HTML file with a local image in WebView 【发布时间】:2019-10-04 18:21:33 【问题描述】:我正在尝试在 WebView 中呈现带有本地图像的本地 html 文件,其中 WebView 在对话框中而不是 Activity 中。图像没有被渲染,但信息的其余部分显示得很好。
Stack Overflow 中建议了无数解决此问题的方法,其中许多带有绿色复选标记。我试过的都没有用。
我正在做的是将 html 文件和图像放在 res/raw 中 html 文件有一行引用图像;我尝试了不同的选项,所有这些选项都在堆栈溢出的某处被声明为有效,例如:
<img src="file:///android_res/raw/main_screen_crop.png" >
和
<img src="main_screen_crop.png" >
html 的文本部分渲染得很好,但对于图像,我只得到一个带有缩略图图标的空框内的“alt”文本。
所以我的问题是:
当 WebView 的 html 在不同于 Activity 的 Dialog Box 中呈现时访问图像是否会导致建议的解决方案无效? 一些答案说“将图像放在资产目录中并使用 file:///...”来引用图像,他们表示这是必需的,这与其他的相矛盾 解决方案。是否需要使用资产目录? Android 有一个 2018 年的教程 https://www.youtube.com/watch?v=HGZYtDZhOEQ 指出 *** 上关于如何处理 WebView 的许多答案都是完全错误的,但承认由于文档过时,部分原因是他们的错...这是我的渲染代码,它适用于其他一切!
LayoutInflater inflater = ((Activity)context).getLayoutInflater();
@SuppressLint("InflateParams") // Okay on dialog
final View helpContent = inflater.inflate(R.layout.help_screen, null);
// Get the Alert Dialog Builder
android.support.v7.app.AlertDialog.Builder builder = new android.support.v7.app.AlertDialog.Builder(context);
TextView customTitle = new TextView(context);
// Customise Title here
customTitle.setText(title);
customTitle.setBackgroundColor(context.getResources().getColor(R.color.colorToolbarBackground));
customTitle.setPadding(10, 10, 10, 10);
customTitle.setGravity(Gravity.CENTER);
customTitle.setTextColor(Color.WHITE);
customTitle.setTextSize(20);
builder.setCustomTitle(customTitle)
WebView help = helpContent.findViewById(R.id.helpView);
help.setWebViewClient(new WebViewClient()
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url)
view.loadUrl(url);
return true;
);
String helpText = readRawTextFile(htmlpage); // reads the html file
help.getSettings().setAllowFileAccess(true); // This did not help ...
help.loadData(helpText, "text/html; charset=utf-8", "utf-8");
builder.setView(helpContent); // put view in Dialog box
任何关于正确的帮助、澄清等将不胜感激! 应该添加 html 文件,当在 Windows 中单击时,在浏览器中呈现良好。
【问题讨论】:
稍微修改一下就可以了 “我正在做的是将 html 文件和图像放在 res/raw 中”——我推荐assets/
。 “需要使用资产目录吗?” -- 我从未尝试过android_res
的事情;我看到的几乎所有东西都使用assets/
。 “当 WebView 的 html 在与 Activity 不同的对话框中呈现时访问图像,从而使建议的解决方案无效?” -- 不应该。
是的,@CommonsWare 的回答会起作用。请尝试让我们知道。
@CommonsWare 无赖!我刚试过。创建了一个资产目录,将图像放入其中,并设置 我得到了结果相同。
它是android_asset
(单数),而不是android_assets
(复数)。 目录 是assets/
(复数),但 URL 中的虚假条目是单数。而且,不,我不知道他们为什么那样做...... :-)
【参考方案1】:
根据 CommonWare 的建议,我将回答这个问题并说明对我有用的方法。我还能够独立于文本缩放图像。
当我的图像和 html 文件位于 res/raw 目录中时,我无法渲染图像。我尝试了很多组合,但都失败了。我不会说这是不可能的。
所做的工作是在 src 目录的同一级别创建一个名为 assets 的目录,并将我的图像文件和 html 文件都放在该目录中。正如 CommonWare 所指出的,文件的 URL 是
"file:///android_asset/main_screen_crop.png"
即使目录名称是“资产”。
代码简化为
LayoutInflater inflater = ((Activity)context).getLayoutInflater();
@SuppressLint("InflateParams") // Okay on dialog
final View helpContent = inflater.inflate(R.layout.help_screen, null);
// Get the Alert Dialog Builder
android.support.v7.app.AlertDialog.Builder builder = new android.support.v7.app.AlertDialog.Builder(context);
TextView customTitle = new TextView(context);
// Customise Title here
customTitle.setText(title);
customTitle.setBackgroundColor(context.getResources().getColor(R.color.colorToolbarBackground));
customTitle.setPadding(10, 10, 10, 10);
customTitle.setGravity(Gravity.CENTER);
customTitle.setTextColor(Color.WHITE);
customTitle.setTextSize(20);
builder.setCustomTitle(customTitle);
WebView help = helpContent.findViewById(R.id.helpView);
help.setWebViewClient(new WebViewClient()
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url)
view.loadUrl(url);
return true;
);
help.getSettings().setAllowFileAccess(true);
help.loadUrl(htmlpage);
builder.setView(helpContent);
例如,“htmlpage”在哪里
"file:///android_asset/layout_help.html"
html文件本身(文字和图片独立缩放)变成:
<html>
<head>
<style>
.gfg
width:auto;
text-align:center;
padding:2px;
img
max-width:100%;
height:auto;
</style>
</head>
<body>
<h3>Running the Application</h3>
After pressing start you will see a screen as follows:
<div class="gfg">
<p id="my-image">
<img src="file:///android_asset/main_screen_crop.png" />
</p>
</div>
</html>
希望这可以为我节省 7 小时的工作时间。
【讨论】:
如果它解决了您的问题,请接受它作为正确答案 @Steven 这样做了。仍在使用它,它完成了工作。我没有尝试过我原来的方法的更多变体。以上是关于在 WebView 中使用本地图像渲染本地 HTML 文件的主要内容,如果未能解决你的问题,请参考以下文章
如何使用flutter dart webview渲染本地HTML文件
android中webview加载html,用本地的css渲染页面如何做