如何使用 HTML 渲染图像，使用 Flutter 创建 iOS-App 的 CSS？答案

【问题标题】：How to render image using HTML, CSS using flutter to create iOS-App?如何使用 HTML 渲染图像，使用 Flutter 创建 iOS-App 的 CSS？
【发布时间】：2020-01-02 07:15:20
【问题描述】：

我正在尝试使用 HTML、CSS 在 Flutter 中创建 PDF。因此，在某些情况下，我必须使用 html 和 css 呈现资产图像。

在 android 的情况下，它使用资产文件位置（如以下代码中提到的 (file:///android_asset/...)）进行渲染：

makeProfileImage() {
  return '<img src="file:///android_asset/flutter_assets/assets/image_name.jpg">';
}

如何在 iOS 中获取像 (file:///android_asset/flutter_assets/...) 这样的资产文件路径？

Future<void> printPdf() async {
  print('Print ...');
  await Printing.layoutPdf(onLayout: (PdfPageFormat format) async {
    return await Printing.convertHtml(
        format: PdfPageFormat.a4
            .applyMargin(left: 0, top: 0, right: 0, bottom: 0),
        html: '<html><head>' +
            getRatingbarCss() +
            '<style>.checked {color: red;}</style>' +
            '</head><body style="margin:0;padding:0" bgcolor="white">' +
            makeProfileImage() +
            '<h2 style="color:black;">Star Rating</h2><span class="fa fa-star checked"/><span class="fa fa-star checked"/><span class="fa fa-star checked"/><span class="fa fa-star"/><span class="fa fa-star"/></body></html>');
  });
}

pubspec.yaml

dev_dependencies:
  flutter_test:
    sdk: flutter
  pdf: ^1.3.17
  printing: ^2.0.0
  flutter_full_pdf_viewer: ^1.0.4

【问题讨论】：

将你的资产文件夹放在你的 Flutter 项目中。这不会有帮助吗？
是的，我在资产文件夹下有图像，并且已经在 pubspec.yaml 中定义了
我不认为这是一个颤振问题。因为如果我理解这一点，它是关于从网络视图访问资产的。
只有 iOS 存在问题，因为我们可以在 android 中访问资产图像。但在 iOS 中，我不知道如何访问资产图像路径以通过 HTML、CSS 呈现图像。
您可以从这里查看答案stackoverflow.com/questions/56787422/…

标签： html ios image flutter assets

【解决方案1】：

目前的实现，webview 插件中的 FLTWebViewController 和 FLTWebViewFactory 类无法访问 registrar，所以我将它们的 initWithMessenger 方法更改为 initWithRegistrar。现在我们有了在 iOS webview 中加载资产文件的答案：

NSString* key = [_registrar lookupKeyForAsset:url];
NSURL* nsUrl = [[NSBundle mainBundle] URLForResource:key withExtension:nil];
[_webView loadFileURL:nsUrl allowingReadAccessToURL:[NSURL URLWithString:@"file:///"]];

作为拉取请求：https://github.com/flutter/plugins/pull/1247/files

例子：

<html>
 <head>
 </head>
 <body>
    <img src="image_name.jpg">
 </body>
</html>

然后在 Flutter 项目的根目录下创建 assets 文件夹：

assets:
  - assets/image_name.jpg
  - assets/htmlfile.html

创建 Web 视图下面的 dart 代码创建 WebView 并渲染本地 assets/htmlfile.html 文件。

  return WebView(
          initialUrl: 'assets/htmlfile.html',
          javascriptMode: JavascriptMode.unrestricted,
          onWebViewCreated: (WebViewController webViewController) {
            _controller.complete(webViewController);
          },
        );

Loading Local Assets in WebView in Flutter

【讨论】：

如何在flutter中使用这段代码？ NSString* key = [_registrar lookupKeyForAsset:url]; NSURL* nsUrl = [[NSBundle mainBundle] URLForResource:key withExtension:nil]; [_webView loadFileURL:nsUrl allowedReadAccessToURL:[NSURL URLWithString:@"file:///"]];
@jazzbpn 它正在等待批准 pull github.com/flutter/plugins/pull/1247/files 你可以在flutter插件编辑4个文件或等待批准
好的，我在等。
我们需要编辑哪四个文件和哪个插件？我在 webview 插件中找不到 FLTWebViewController 和 FLTWebViewFactory 类。那么，这些文件在哪里？
在路径 packages/webview_flutter/ios/Classes/FlutterWebView.h