如何在Flutter中用WebViewController的loadHtmlString加载带相对路径的HTML字符串

你的问题核心是baseURL应该指向资源所在的目录，而非具体的HTML文件，之前你传入的是index.html的文件路径，导致WebView无法正确解析相对路径。

正确的baseURL生成方式 #

利用Uri.directory()方法将应用目录路径转换为标准的file://协议URI，它会自动处理不同平台的路径格式（比如斜杠、协议头），确保WebView能识别：

// 生成目录的标准file URI
final baseUrl = Uri.directory(widget.html.directory).toString();

修改后的代码示例 #

把你的initState部分调整为：

@override
void initState() {
  super.initState();

  String content = File("${widget.html.directory}index.html").readAsStringSync();
  // 在此处修改文件内容...

  content = '''<p>new content</p> 
                <img src="./relative/path">
                $content''';

  late final PlatformWebViewControllerCreationParams params;
  params = const PlatformWebViewControllerCreationParams();

  final WebViewController controller =
      WebViewController.fromPlatformCreationParams(params);

  // 生成正确的baseURL：指向资源所在目录的file URI
  final baseUrl = Uri.directory(widget.html.directory).toString();

  controller
    ..setJavaScriptMode(JavaScriptMode.unrestricted)
    ..loadHtmlString(content, baseURL: baseUrl);

  _controller = controller;
}

关键说明 #

• Uri.directory()会自动为URI添加结尾的斜杠，确保相对路径（比如./images/xxx.jpg）能正确映射到目录下的资源。
• 确保widget.html.directory是目录路径（比如通过getApplicationDocumentsDirectory()获取的路径），而非文件路径。
• 之前手动拼接file://path_to_file/容易出错，因为不同平台的路径格式有差异（比如Windows用反斜杠），Uri.directory()会帮你处理这些细节。

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