Flutter中WebView无法显示HTTP格式img标签图片的问题求解

这是由于移动端操作系统默认禁止明文HTTP请求，同时WebView默认禁用混合内容（即HTTPS上下文下加载HTTP资源）共同导致的。

1. 配置系统明文请求权限 #

安卓端 #

打开android/app/src/main/AndroidManifest.xml，在<application>标签中添加允许明文流量的属性：

<application
    android:label="你的应用名"
    android:name="${applicationName}"
    android:icon="@mipmap/ic_launcher"
    <!-- 新增下面这行 -->
    android:usesCleartextTraffic="true">

iOS端 #

打开ios/Runner/Info.plist，在NSAppTransportSecurity配置项下添加允许任意加载的配置：

<key>NSAppTransportSecurity</key>
<dict>
    <!-- 新增下面这行 -->
    <key>NSAllowsArbitraryLoads</key>
    <true/>
    <key>NSAllowsArbitraryLoadsInWebContent</key>
    <true/>
</dict>

2. 配置WebView混合内容加载权限 #

在你的WebView组件中添加mixedContentMode参数，允许混合内容加载：

WebView(
  initialUrl: Uri.dataFromString(
          "<meta name='viewport' content='width=device-width,initial-scale=1,maximum-scale=1'/>"
          "${HtmlCodeHtpp}",
          mimeType: 'text/html',
          encoding: Encoding.getByName('utf-8'))
      .toString(),
  javascriptMode: JavascriptMode.unrestricted,
  // 新增下面这行，允许混合内容
  mixedContentMode: MixedContentMode.compatibility,
  onWebViewCreated: (WebViewController webViewController) {
    _controller.complete(webViewController);
  },
),

3. 可选优化方案 #

如果你的HTML中引用的HTTP图片站点支持HTTPS访问，可以直接在加载HTML前批量替换所有HTTP图片链接为HTTPS，无需修改系统权限，更符合安全规范：

// 加载前替换链接
String processedHtml = HtmlCodeHtpp.replaceAll('src="http://', 'src="https://');

内容的提问来源于stack exchange，提问作者uknown18user