Flutter中使用webview_flutter加载URL时图片及静态资源无法加载问题

针对你遇到的WebView能加载页面但资源（图片、CSS、JS）无法加载的问题，按以下步骤排查解决：

1. 先排查目标网站本身的问题 #

用手机自带浏览器打开你要加载的URL，确认图片、样式和交互是否正常。如果浏览器里也有同样问题，那是网站本身的资源路径或配置问题，和Flutter WebView无关。

2. 开启资源错误日志排查具体问题 #

你的onWebResourceError回调是空的，先加上错误打印，能直接看到资源加载失败的原因（比如404、跨域、混合内容阻止等）：

onWebResourceError: (WebResourceError error) {
  print('资源加载错误: ${error.errorCode} - ${error.description}');
},

3. 处理混合内容（HTTP/HTTPS混合加载） #

如果目标网站是HTTPS协议，但内部引用了HTTP的资源，Android默认会阻止这类混合内容，需要做以下配置：

• Android端：在android/app/src/main/AndroidManifest.xml的<application>标签里添加：

  android:usesCleartextTraffic="true"
  

  或者更精细地允许混合内容加载，在WebViewController初始化时补充：

  ..setWebViewConfiguration(WebViewConfiguration(
    mixedContentMode: MixedContentMode.alwaysAllow,
  ))
  

• iOS端：在ios/Runner/Info.plist里添加：

  <key>NSAppTransportSecurity</key>
  <dict>
    <key>NSAllowsArbitraryLoads</key>
    <true/>
  </dict>
  

4. 补充WebView必要设置 #

在初始化WebViewController时，添加以下配置确保JS和存储功能正常：

controller = WebViewController()
  ..setJavaScriptMode(JavaScriptMode.unrestricted)
  ..setDomStorageEnabled(true) // 部分JS依赖DOM存储才能正常运行
  ..setAllowFileAccess(true)
  ..setAllowContentAccess(true)
  // 保留你原有的其他配置
  ..loadRequest(Uri.parse(widget.url));

5. 检查资源路径是否为相对路径 #

如果网站里的资源用的是相对路径（比如./images/xxx.png或/css/style.css），确认WebView加载的URL是完整的根域名（比如https://example.com/about），确保相对路径能正确解析。如果是嵌套路径问题，建议网站资源直接使用绝对URL（https://example.com/images/xxx.png）。

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