在 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渲染页面如何做

在 webView 中渲染本地 PDF 会切断右侧

Android-WebView与本地HTML(播放视频)

当设备在 react-native 中离线时,在 webview 中显示本地图像

如何在 Android WebView 中加载本地图像