在WebView中使用本地图像渲染本地HTML文件 [英] Rendering a local HTML file with a local image in WebView

问题描述

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

I am trying to render a local html file with a local image in a WebView where the WebView is in a Dialog Box and not an Activity. The image is not being rendered, but the remainder of the info is displayed just fine.

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

There are countless solutions to this problem suggested in Stack Overflow, many with green check marks. None that I have tried have worked.

我正在做的是将html文件和图像放置在res/raw中html文件中有一行引用图像.我已经尝试了不同的选项，这些选项在堆栈溢出的某个地方都可以正常工作，例如:

What I am doing is placing the html file and the image in res/raw The html file has a line referencing the image; I have tried different options all which have been stated somewhere in stack overflow as working, for example:

<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"文本.

The text part of the html renders fine, but for the image I get just the 'alt' text inside an empty box with a thumbnail picture icon.

所以我的问题是:

• 当在与活动不同的对话框中呈现WebView的html时，是否正在访问图像，使建议的解决方案无效?
• 一些回答说将图像放置在资产目录中并使用file:///..."来引用该图像，并且他们指出这是必需的，这与其他解决方案.是否需要使用资产目录?
• Android拥有2018年教程 https://www.youtube.com/watch?v=HGZYtDZhOEQ 指出，关于如何处理WebView的许多StackOverflow答案都完全是错误的，但由于部分文档过时而承认这部分是他们的错...

• Is accessing an image when the html of a WebView is rendered inside a Dialog Box different than an Activity making the suggested solutions invalid?
• Some answers said "place the image in the assets directory and use the file:///..." to reference the image AND they indicated that this was required which contradicts other solutions. Is the use of the assets directory required?
• Android has a 2018 tutorial https://www.youtube.com/watch?v=HGZYtDZhOEQ stating that many of the StackOverflow answers on how to handle WebView are just plain wrong but admit it is partly their fault due to out of date documentation ...

这是我的渲染代码，它对其他所有功能都适用！

Here is my render code which works just fine for everything else!

    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文件后，该文件在浏览器中可以正常显示.

Any help, clarification, etc. as to what is correct will be greatly appreciated! Should add that the html file, when clicked on in Windows, renders fine in a browser.

推荐答案

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

Following CommonWare's suggestion, I will answer this question and state what worked for me. I was also able to scale the image independently of the text.

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

I was unable to get the image to render when my image and html file were in the res/raw directory. I tried many combinations and failed. I will not state that it is impossible.

DID的工作是在与src目录相同的级别上创建资产目录，然后将我的图像文件和html文件都放置在该目录中.正如CommonWare所指出的，文件的URL是

What DID work was creating an assets directory at the same level as the src directory and placing BOTH my image file and html file in that directory. As CommonWare pointed out, the URL for the files is

"file://android_asset/main_screen_crop.png"

即使目录名是"assets".

even though the directory name is '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"是

where 'htmlpage' is, for example,

"file:///android_asset/layout_help.html"

html文件本身(具有独立缩放的文本和图像)变为:

The html file itself (with independent scaling of text and image) becomes:

<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个小时才能使它正常工作.

Hope this saves someone the 7 hrs it took me to get it to work.

这篇关于在WebView中使用本地图像渲染本地HTML文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！