How to display image in pdf using html-string in flutter iOS app?

Question

Edit: I have posted the answer for Android but still unknown about iOS case.

How to create the circular image using html-string in flutter? src="assets/test.jpg" OR src="file:///assets/profyl.jpg" is not working.

Here's what I have:

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>');
  });
}

afcode · Accepted Answer · 2019-08-14 08:22:11Z

1

Answer when the Question was: How to add circular-image using html string in Flutter? Image not displaying

Have you added your Image to the Asset Section in the pubspec.yaml (https://flutter.dev/docs/development/ui/assets-and-images)
If yes: Can you access it in the Flutter Code using Image.asset('path/yourimage.png'),
Try to use the ImageProvider like in the Example here: https://pub.dev/packages/printing#-readme-tab- (You will not be able to use HTLM then)

Answer when the Question was: How to add circular-image using html string in Flutter

You can use the border-radius: 50% property on your Image.

In your case the following should work: '<html><body><table><tr><td><img src="assets/profyl.jpg" alt="Avatar" style="border-radius: 50%;"></td><td>Purple</td></tr></table></body></html>'

See this example here: https://www.w3schools.com/css/css3_images.asp

Or the reference here: https://developer.mozilla.org/de/docs/Web/CSS/border-radius

edited Aug 14, 2019 at 8:22

answered Aug 14, 2019 at 6:04

afcode

5601 gold badge4 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

jazzbpn Over a year ago

Image is not displaying. So, is the reason behind this?

afcode Over a year ago

I am not sure what you mean? So your Image is not even showing up in your pdf export? This is not mentioned in your question. EDIT OK you added it now with Edit Nr. 6

jazzbpn · Accepted Answer · 2019-08-16 04:39:56Z

0

This work for android case but not for iOS.

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

answered Aug 16, 2019 at 4:39

jazzbpn

7,43418 gold badges68 silver badges109 bronze badges

2 Comments

Donatas Over a year ago

Did you eventually figure it out for iOS? I'm having the same issue now.

jazzbpn Over a year ago

Not till now !!

Collectives™ on Stack Overflow

How to display image in pdf using html-string in flutter iOS app?

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related