如何在 Flutter iOS 应用程序中使用 html-string 以 pdf 格式显示图像？答案

【问题标题】：How to display image in pdf using html-string in flutter iOS app?如何在 Flutter iOS 应用程序中使用 html-string 以 pdf 格式显示图像？
【发布时间】：2019-12-20 15:54:02
【问题描述】：

编辑：我已经发布了 Android 的答案，但对于 iOS 案例仍然未知。

如何在 Flutter 中使用 html-string 创建圆形图像？ src="assets/test.jpg" 或 src="file:///assets/profyl.jpg" 不起作用。

这是我所拥有的：

Future<void> _printPdfAsHtml() async {
  print('Print ...');
  await Printing.layoutPdf(onLayout: (PdfPageFormat format) async {
    return await Printing.convertHtml(
        format: format,
        html:
            '<html><body><table><tr><td><img src="assets/test.jpg" alt="Avatar"></td><td>Purple</td></tr></table></body></html>');
  });
}

【问题讨论】：

标签： css flutter dart pdf-generation dart-html

【解决方案1】：

当问题是： 如何在 Flutter 中使用 html 字符串添加圆形图像？图片不显示

您是否已将您的图片添加到 pubspec.yaml (https://flutter.dev/docs/development/ui/assets-and-images) 中的资产部分
如果是：您能否在 Flutter 代码中使用 Image.asset('path/yourimage.png'), 访问它
尝试使用 ImageProvider，就像这里的示例一样：https://pub.dev/packages/printing#-readme-tab- （您将无法使用 HTLM）

当问题是时回答： 如何在 Flutter 中使用 html 字符串添加圆形图像

您可以在图像上使用border-radius: 50% 属性。

在您的情况下，以下应该有效：'<html><body><table><tr><td><img src="assets/profyl.jpg" alt="Avatar" style="border-radius: 50%;"></td><td>Purple</td></tr></table></body></html>'

在此处查看此示例：https://www.w3schools.com/css/css3_images.asp

或参考这里：https://developer.mozilla.org/de/docs/Web/CSS/border-radius

【讨论】：

图片未显示。那么，这背后的原因是什么？
我不确定你的意思？所以你的图像甚至没有出现在你的 pdf 导出中？你的问题中没有提到这一点。 EDIT 好的，您现在使用 Edit Nr 添加了它。 6

【解决方案2】：

这适用于 android 案例 但不适用于 iOS。

<img src="file:///android_asset/flutter_assets/assets/profyl.jpg" alt="Avatar" height="100" width="100 style="border-radius: 50%;">

【讨论】：

你最终为 iOS 解决了吗？我现在也有同样的问题。
直到现在！！