本地 html 文件在某些 Android 设备上显示为空白答案

【问题标题】：local html file showing blank on some Android devices本地 html 文件在某些 Android 设备上显示为空白
【发布时间】：2020-08-25 18:56:14
【问题描述】：

我的 Android 应用需要显示存储在本地 SD 卡上的 Html 文件。 html文件比较简单，这里是源代码。它在某些设备上显示良好，但在某些设备上只是空白（两者都在 Kitkat 上）。我怀疑在这些设备上，webview 无法正确显示图像列表（img 对象）。有什么建议可以通过更改 webview 或 html 源代码的一些设置来解决它？

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <style>
      img{
        display: block;
        width:100%;
        margin-bottom: 22px;
      }
    </style>
  </head>
  <body><img src="pi/pi_0.png" alt="">
<img src="pi/pi_1.png" alt="">
<img src="pi/pi_2.png" alt="">
<img src="pi/pi_3.png" alt="">
<img src="pi/pi_4.png" alt="">
<img src="pi/pi_5.png" alt="">
<img src="pi/pi_6.png" alt="">
<img src="pi/pi_7.png" alt="">
<img src="pi/pi_8.png" alt="">
<img src="pi/pi_9.png" alt="">
<img src="pi/pi_10.png" alt="">
  </body>
</html>

【问题讨论】：

您尝试过使用小尺寸图片吗？
您可以尝试在 html 中添加一些文本吗？然后你就知道你的文件是没有加载还是只是图片的问题。
我怀疑你的问题是关于那些图像路径。您是否接受运行此测试：使用以下技术将您的图像转换为内联图像：developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/… 如果这项工作有效，那么您将知道这是问题所在

标签： android html image android-webview android-4.4-kitkat

【解决方案1】：

虽然它应该在所有设备上都能正常工作。为了调试实际原因，您需要使用chrome remote debugging tools。使用这些工具应该很容易确定原因。

来自文档：

使用 Chrome 开发人员在您的原生 Android 应用程序中调试 WebView 工具。

在 Android 4.4 (KitKat) 或更高版本上，使用 DevTools 调试 WebView 原生 Android 应用程序中的内容。

需要在使用webview的文件中放入如下代码：

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
    WebView.setWebContentsDebuggingEnabled(true);
}

然后打开它

chrome://inspect

一些有用的链接以获得更多信息：

Remote Debugging

A Tutorial

【讨论】：

虽然这不是问题的直接答案，但它是最有用的答案。

【解决方案2】：

如果它如您所说在 SD 卡上，请尝试使用文件的完整路径。像file:///sdcard/folder/pi/pi_1.png 这样的模式。对于每部手机，这条路径可能会有所不同。所以首先，试着找出这个文件在 Java/Kotlin 代码中的路径。然后 loadHtml 你有正确的文件完整路径。如果您的图像文件位于资产文件夹中，那么您应该这样做并使用完整路径，而不是相对路径

【讨论】：

加载单个图像是可以的。这个特定的 html 文件加载了一个包含 10 个图像的图像列表。它适用于大多数设备，但不适用于某些设备。

【解决方案3】：

因此，如果您从外部存储加载它们，则必须添加权限才能这样做：

<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />

如果你正在使用这个 URL 试试这个：

String url = "file:///" + Environment.getExternalStorageDirectory().getAbsolutePath() + File.separator + "content/myFile.html";

【讨论】：

【解决方案4】：

我测试了这段代码，甚至在 android API 19 (kitkat) 中也为我工作：

    public class MainActivity extends AppCompatActivity {
    public final static int PERMISSION_REQUEST_CODE = 235;

    private WebView webView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        webView = findViewById(R.id.web_view);

        if (checkPermission()) {
            loadHtmlFile();
        } else {
            requestPermission();
        }

    }


    private boolean checkPermission() {
        if (ContextCompat.checkSelfPermission(this, Manifest.permission.WRITE_EXTERNAL_STORAGE)
                != PackageManager.PERMISSION_GRANTED) {
            return false;
        }
        return true;
    }

    private void requestPermission() {

        ActivityCompat.requestPermissions(this,
                new String[]{Manifest.permission.WRITE_EXTERNAL_STORAGE},
                PERMISSION_REQUEST_CODE);
    }

    @Override
    public void onRequestPermissionsResult(int requestCode, String permissions[], int[] grantResults) {
        switch (requestCode) {
            case PERMISSION_REQUEST_CODE:
                if (grantResults.length > 0 && grantResults[0] == PackageManager.PERMISSION_GRANTED) {
                    loadHtmlFile();
                } else {
                }
                break;
        }
    }

    private void loadHtmlFile() {
        if (!Environment.getExternalStorageState().equals(Environment.MEDIA_MOUNTED)) {
            Log.d("tag", "No SDCARD");
        } else {
            webView.loadUrl("file://" + Environment.getExternalStorageDirectory() + "/test.html");

        }
    }

}

确保文件存在于正确的位置：

【讨论】：

【解决方案5】：

允许在您的网络视图中关注。

    webView.getSettings().setDomStorageEnabled(true);
    webView.getSettings().setAllowContentAccess(true);
    webView.getSettings().setAllowFileAccess(true);

【讨论】：