Flutter Web中WebView无法渲染图片且报平台实现错误如何解决？

问题原因 #

webview_flutter核心包未内置Web平台的实现，必须额外引入Web端适配包才能正常工作；图片不渲染通常和跨域限制、加载时机或WebView配置有关。

修复步骤 #

1. 添加Web端依赖 #

在项目pubspec.yaml中补充Web适配依赖：

dependencies:
  flutter:
    sdk: flutter
  webview_flutter: ^4.4.0 # 使用对应稳定版本
  webview_flutter_web: ^0.2.2+1 # 需与webview_flutter版本兼容

执行命令安装依赖：

flutter pub get

2. 注册WebView平台实现 #

在应用启动入口（main.dart的main函数）中初始化Web端平台：

import 'package:webview_flutter/webview_flutter.dart';
import 'package:webview_flutter_web/webview_flutter_web.dart';

void main() {
  WebViewPlatform.instance = WebWebViewPlatform();
  runApp(const MyApp());
}

3. 修正页面加载逻辑 #

原代码在build方法中调用loadRequest会导致重复加载，将初始化和加载逻辑移至initState：

class _CheckoutPageState extends State<CheckoutPage> {
  late WebViewController controller;

  @override
  void initState() {
    super.initState();
    controller = WebViewController()
      ..setJavaScriptMode(JavaScriptMode.unrestricted)
      ..loadRequest(Uri.parse(widget.url));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(body: WebViewWidget(controller: controller));
  }
}

4. 解决图片不渲染问题 #

• 配置WebView允许混合内容：如果目标页面包含http图片资源（当前Web应用为https），添加混合内容支持：

  controller = WebViewController()
    ..setJavaScriptMode(JavaScriptMode.unrestricted)
    ..setBackgroundColor(const Color(0x00000000))
    ..setNavigationDelegate(NavigationDelegate(
      onPageFinished: (String url) {},
    ))
    ..loadRequest(
      Uri.parse(widget.url),
      allowsInlineMediaPlayback: true,
    );
  

• 检查跨域限制：确认目标URL的服务器已配置CORS，允许你的Flutter Web域名访问图片资源；若为本地测试，可在浏览器中临时禁用跨域限制（仅用于调试）。

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