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

时间:2019-05-17 12:05:45

标签: android html android-webview

我正在尝试在WebView中使用本地图像渲染本地html文件,其中WebView在对话框中而不是活动中。图片未渲染,但其余信息显示得很好。

在堆栈溢出中建议了无数解决此问题的方法,其中许多带有绿色复选标记。我尝试过的都没有奏效。

我正在做的是将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时,是否正在访问图像?
  • 一些回答说“将图像放置在资产目录中,并使用文件:/// ...”来引用该图像,并且他们指出这是必需的,这与其他 解决方案。是否需要使用资产目录?
  • Android的2018年教程https://www.youtube.com/watch?v=HGZYtDZhOEQ指出,关于如何处理WebView的许多StackOverflow答案都完全是错误的,但由于部分文档过时而承认这部分是他们的错...

这是我的渲染代码,对其他所有功能都适用!

    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

任何有关正确方法的帮助,说明等,将不胜感激! 应该添加的是,在Windows中单击该html文件后,该文件在浏览器中可以正常显示。

1 个答案:

答案 0 :(得分:0)

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

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

DID的工作是在与src目录相同的级别上创建资产目录,并将我的图像文件和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个小时才能使它正常工作。