Question

我正在尝试将图像嵌入本地html文件中。并尝试通过Flutter Webview加载该html文件。该网页上的文字显示了，但是没有显示本地引用的图像。

WebView

class _HomeState extends State<Home> {
  WebViewController _webViewController;
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.orange,
      child: WebView(
        initialUrl: "",
        javascriptMode: JavascriptMode.unrestricted,
        onWebViewCreated: (controller){
          _webViewController = controller;
          _loadHtmlFromAssets();
        },
      ),

    );
  }

  _loadHtmlFromAssets() async {
    String fileHtmlContents = await rootBundle.loadString("assets/test.html");
    _webViewController.loadUrl(Uri.dataFromString(fileHtmlContents,
            mimeType: 'text/html', encoding: Encoding.getByName('utf-8'))
        .toString());
  }
}

HTML

<h1>Hellop</h1>
<img src="myimage.jpg">

Answer 1

您可以使用flutter_inappwebview插件。首先在您的pubspec.yaml

中定义资产目录

  assets:
    - assets/index.html
    - assets/img/

创建用于内容传递的本地服务器。

InAppLocalhostServer localhostServer = new InAppLocalhostServer();

运行服务器

void main() async {
  await localhostServer.start();
  runApp(MyApp());
}

在小部件树中添加InAppWebView。

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: InAppWebView(
        initialUrl: "http://localhost:8080/assets/index.html",
        initialOptions: InAppWebViewWidgetOptions(
            inAppWebViewOptions: InAppWebViewOptions(
              debuggingEnabled: true,
            )
        ),
      ),
    );
  }

停止服务器

  @override
  void dispose() {
    localhostServer.close();
    super.dispose();
  }

我创建了一个示例项目，您可以在这里https://github.com/zakir01913/flutter_webview_with_local_assest

如何从Flutter WebView访问本地CSS，JS和图像

1 个答案: