Как добавить изображение из папки ресурсов в локальный файл HTML и отобразить файл HTML во Flutter WebView

Question

Я добавил изображение в папку с ресурсами, но при использовании его в теге img в файле html с "image.png" как src Webview во флаттере его не отображает. Я также попытался преобразовать его в base64, что устранило проблему, но мне нужно, чтобы изображение было в папке с ресурсами.

Answer 1

Вы можете скопировать вставку, запустить полный код и index.html ниже
Вы можете использовать пакет https://pub.dev/packages/flutter_inappwebview
В рабочей демонстрации вы можете увидеть значок флаттера <img src="images/flutter-logo.svg" alt="flutter logo"> отображается правильно

Шаг 1: добавьте android:usesCleartextTraffic="true" в AndroidManifest.xml
Шаг 2: pubspec.yaml настройка

assets:
    - assets/images/
    - assets/

Шаг 3: Добавьте файлы и изображения в assets папку

working demo

full code

import 'package:flutter/material.dart';
import 'package:flutter_inappwebview/flutter_inappwebview.dart';

InAppLocalhostServer localhostServer = new InAppLocalhostServer();

Future main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await localhostServer.start();
  runApp(new MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('InAppWebView Example'),
        ),
        body: Container(
            child: Column(children: [
          Expanded(
            child: Container(
              child: InAppWebView(
                initialUrl: "http://localhost:8080/assets/index.html",
                initialHeaders: {},
                initialOptions: InAppWebViewGroupOptions(),
                onWebViewCreated: (InAppWebViewController controller) {},
                onLoadStart: (InAppWebViewController controller, String url) {},
                onLoadStop: (InAppWebViewController controller, String url) {},
              ),
            ),
          )
        ])),
      ),
    );
  }
}

index.html

  Flutter InAppWebView