Flutter调用android原生WebView显示HTML图片存在白边的问题（已解决）

本文介绍: 这里写自定义目录标题记录一次Flut t e r 调用 android 原生We bView显示HTML图片存在白边的问题（已解决）问题由来问题现象：1.使用 flutter 插件2.使用原生We bView3.使用WebView加载Html4.修改WebView配置和Html样式问题总结：记录一次Flut ter 调用 android 原生WebView显示HTML图片存在白边的问题（已解决）问题由来最近flutter在使用 webview 展示图片的时候，flutter 插件都无法显示，很奇怪，服务返回的图片地址是https 开头的

记录 一次Flutter 调用 android 原生WebView显示HTML图片存在白边的问题（已解决）

问题由来
问题现象：
问题总结：

问题由来

最近flutter在使用 webview 展示图片的时候，flutter 插件都无法显示，很奇怪，服务返回的图片地址是https开头的图片，网页上和ios端能直接下载，但是在And roi d 手机上就是无法显示，于是乎开始找解决办法。通过更换各种flutter 插件，比如 webview _flutter、flutter _webview _plugin都不行之后就换成了原生WebView。但是也是无法显示。

问题现象：

1.使用 flutter 插件

使用的是flutter的插件 flutter _webview _plugin，图片地址为https 地址的，确认在网页和IOS是可以直接访问的。
在这里插入图片描述

很遗憾，没有任何日志显示异常，我甚至比对了正常显示的时候（使用百度上找的一张图）和错误时的日志无任何差别。后来就索性想着自己写android原生WebView界面来显示图片。

2.使用原生WebView

		webView.loadUrl(path);
		webView.getSettings().setMediaPlaybackRequiresUserGesture(true);
		webView.getSettings().setLayoutAlgorithm(WebSettings.LayoutAlgorithm.SINGLE_COLUMN);
		//设置WebView属性，能够执行Javascript脚本
		webView.getSettings().setJavaScriptEnabled(true);//设置js可用
		webView.getSettings().setDisplayZoomControls(false);
		webView.setScrollBarStyle(View.SCROLLBARS_INSIDE_OVERLAY); //设置滚动条样式
		if (Build.VERSION.SDK_INT &gt;= Build.VERSION_CODES.LOLLIPOP) {
		    webView.getSettings().setMixedContentMode(android.webkit.WebSettings.MIXED_CONTENT_ALWAYS_ALLOW);
		}
		//系统默认会通过手机浏览器打开网页，为了能够直接通过WebView显示网页，则必须设置
		webView.setWebViewClient(new WebViewClient(){
		    @Override
		    public boolean shouldOverrideUrlLoading(WebView view, String url) {
		        //使用WebView加载显示url
		        view.loadUrl(url);
		        //返回true
		        return true;
		    }
		    
		})

很遗憾还是和上图一样，还是显示成白色，我把日志打开也是没有任何日志。就在我一头雾水就快放弃时，我发现 webview还有一种api加载图片，是通过传入html的方式加载的。于是我使用了第三种方法。

3.使用WebView加载Html

使用html之后图片(因为涉及到业务，图片我这里用网络图片示例了)竟然可以出来了

 		//访问网页
        webView.loadDataWithBaseURL(null, "<!DOCTYPE html&gt;<html&gt;<body><div><img src="+ path +
                " /></div></body></html>", "text/html", "utf-8", null);
        webView.getSettings().setMediaPlaybackRequiresUserGesture(true);
        webView.getSettings().setLayoutAlgorithm(WebSettings.LayoutAlgorithm.SINGLE_COLUMN);
        //设置WebView属性，能够执行Javascript脚本
        webView.getSettings().setJavaScriptEnabled(true);//设置js可用
        webView.getSettings().setDisplayZoomControls(false);
        webView.setScrollBarStyle(View.SCROLLBARS_INSIDE_OVERLAY); //设置滚动条样式
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
            webView.getSettings().setMixedContentMode(android.webkit.WebSettings.MIXED_CONTENT_ALWAYS_ALLOW);
        }

在这里插入图片描述
但是还存两个问题
1.图片大小宽度不适配屏幕大小
2.顶部左边底部都有白边

4.修改WebView配置和Html样式

主要进行两个地方的修改
1.Html中增加style，margin和padding分别设置为0，注意body，div和img 标签都需要设置
2.WebView设置中设置setUseWideViewPo rt和setLoadWithOverviewMode都为tr ue就正常显示了

        webView.loadDataWithBaseURL(null, "<!DOCTYPE html><html><head><style>*{width:100%}</style></head><body style='margin:0;padding:0><div style='margin:0;padding:0><img src="+ path +
                " style='margin:0;padding:0'/></div></body></html>", "text/html", "utf-8", null);
        webView.getSettings().setUseWideViewPort(true);//调整到适合webview的大小，不过尽量不要用，有些手机有问题
        webView.getSettings().setLoadWithOverviewMode(true); ///根据手机分辨率显示图片
        ......