在 WebView 中使用本地图像渲染本地 HTML 文件

Question

我正在尝试在 WebView 中使用本地图像呈现本地 html 文件，其中 WebView 位于对话框中，而不是 Activity。图像未被渲染，但信息的其余部分显示得很好。

Stack Overflow 中针对此问题提出了无数解决方案，其中许多带有绿色复选标记。 None 我试过的有效。

我正在做的是将 html 文件和图像放在 res/raw html 文件有一行引用图像；我尝试了不同的选项，所有这些选项都已在堆栈溢出的某处说明为有效，例如：

<img src="file:///android_res/raw/main_screen_crop.png" alt="Main Screen" width="525" height="290">

和

<img src="main_screen_crop.png" alt="Main Screen" width="525" height="290">

html 的文本部分呈现良好，但对于图像，我只在带有缩略图图标的空框中得到 'alt' 文本。

所以我的问题是：

当 WebView 的 html 在不同于 Activity 的对话框中呈现时访问图像是否使建议的解决方案无效？
一些答案说 "place the image in the assets directory and use the file:///..." 引用图像并且他们表示这是必需的，这与其他答案相矛盾解决方案。是否需要使用assets目录？
Android 有一个 2018 年的教程 https://www.youtube.com/watch?v=HGZYtDZhOEQ 指出许多关于如何处理 WebView 的 Whosebug 答案完全是错误的，但承认由于过时的文档，这在一定程度上是他们的错.. .

这是我的渲染代码，它适用于其他一切！

    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 中单击时，在浏览器中呈现良好。

Answer 1

根据 CommonWare 的建议，我将回答这个问题并说明对我有用的方法。我还能够独立于文本缩放图像。

当我的图像和 html 文件位于 res/raw 目录中时，我无法渲染图像。我尝试了很多组合但都失败了。我不会说不可能。

DID 的工作是在与 src 目录相同的级别创建一个名为 assets 的目录，并将我的图像文件和 html 文件放在该目录中。正如 CommonWare 指出的那样，文件的 URL 是

"file:///android_asset/main_screen_crop.png"

即使目录名称是 'assets'.

代码简化为

    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" alt="Main Screen"/>
    </p>
</div>
</html>

希望这可以节省我花费 7 个小时让它工作的时间。

在 WebView 中使用本地图像渲染本地 HTML 文件

Rendering a local HTML file with a local image in WebView

html

android

android-webview