Open issue at GitHub

I am using HTML/CSS to create PDF views. So, In some cases we need render images from the local asset-folder. When we try to render the file from assets folder image is not displaying. How to resolve this issue?


enter image description here

Full Source Code:


import 'package:flutter/material.dart';
import 'dart:async';
import 'dart:io';

import 'package:flutter_full_pdf_viewer/flutter_full_pdf_viewer.dart';
import 'package:flutter_html_to_pdf/flutter_html_to_pdf.dart';
import 'package:path_provider/path_provider.dart';

void main() {
    home: MyApp(),

var base64Image = "";

class MyApp extends StatefulWidget {
  _MyAppState createState() => _MyAppState();

class _MyAppState extends State<MyApp> {
  String generatedPdfFilePath;

  void initState() {

  Future<void> generateExampleDocument() async {
    var htmlContent = """
      <!DOCTYPE html>
          table, th, td {
            border: 1px solid black;
            border-collapse: collapse;
          th, td, p {
            padding: 5px;
            text-align: left;
          <h2>PDF Generated with flutter_html_to_pdf plugin</h2>

          <table style="width:100%">
            <caption>Sample HTML Table</caption>

          <p>Image loaded from web</p>
          <img src="file:///storage/example/your_sample_image.png" alt="web-img">
          <img src="" alt="web-img">
          <img src="file:///assets/profyl.jpg" alt="asset-img">
          <img src="assets/profyl.jpg" alt="asset-img">
          <img src="file:///storage/assets/profyl.png" alt="storage-img">
          <img src="file:///android_asset/flutter_assets/assets/profyl.jpg" alt="android_asset-img">
          <img src="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUA
          9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Base64 Image" style="height: 90%;" />

    Directory appDocDir = await getApplicationDocumentsDirectory();
    var targetPath = appDocDir.path;
    var targetFileName = "example-pdf";

    var generatedPdfFile = await FlutterHtmlToPdf.convertFromHtmlContent(
        htmlContent, targetPath, targetFileName);
    generatedPdfFilePath = generatedPdfFile.path;

  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
      appBar: AppBar(),
      body: Center(
        child: RaisedButton(
          child: Text("Open Generated PDF Preview"),
          onPressed: () => Navigator.push(
                builder: (context) => PDFViewerScaffold(
                    appBar: AppBar(title: Text("Generated PDF Document")),
                    path: generatedPdfFilePath)),


  flutter_full_pdf_viewer: ^1.0.4
  flutter_html_to_pdf: ^0.5.2
  printing: ^2.1.7
  path_provider: ^1.3.0

Solution 1: Logemann

I generally use to generate my own font file which can include icons from many major libraries like "Font Awesome" or others. With that tool you can download a ttf file (and also a config file which you can use to further work on your project at the mentioned page). You will also get a dart file for easy referencing your icons.

This ttf file should be put somewhere in your assets folder or in a subfolder. Then in pubspec just do:

    - family:  MyFont
        - asset: assets/fonts/MyFont.ttf 

Put the generated dart file with the icons constants somewhere in your project. Lets call it myfont_icons.dart. It should look like this:

import 'package:flutter/widgets.dart';

class MyFont {

  static const _kFontFam = 'MyFont';

  static const IconData people = const IconData(0xe802, fontFamily: _kFontFam);
  static const IconData th_list = const IconData(0xe803, fontFamily: _kFontFam);

So its basically the same thing you will have with in Web development with a CSS stylesheet where all the icons are defined with css classes.

When using the icons in your classes, just import that dart file and use it like so:

  size: 94,

Solution 2: Faisal Afroz

Have you included the assets folder in pubspec.yaml directly inside the flutter like this

  - assets/profyl.png


  - assets

for adding whole assets folder


As I have pointed out your pathnames in HTML are not correct. I have tried various pathnames below :

      <img src="" alt="web-img1">
      <img src="file:/Users/Faisal/Projects/Flutter_Apps/flutter_app/assets/f.png" alt="web-img2">
      <img src="file:///Users/Faisal/Projects/Flutter_Apps/flutter_app/assets/f.png" alt="web-img3">
      <img src="file:f.png" alt="web-img4">
      <img src="file:///storage/assets/f.png" alt="img5">
      <img src="file:///android_asset/flutter_assets/assets/f.png" alt="web-img6">
      <img src="/Users/Faisal/Projects/Flutter_Apps/flutter_app/assets/f.png" alt="web-img6">

as you can see in the image 3 pathnames are working locally whereas 3 are not.

Screenshot from apple simulator