资产图片无法在flutter-ios中呈现。 [

Question

我正在使用HTML / CSS创建PDF视图。因此，在某些情况下，我们需要从本地资产文件夹渲染图像。当我们尝试从资源渲染文件时，不显示图像。如何解决这个问题？

IOS的截图：

完整源代码：

RenderHtml.dart

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() {
  runApp(MaterialApp(
    home: MyApp(),
  ));
}

var base64Image = "";

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

class _MyAppState extends State<MyApp> {
  String generatedPdfFilePath;

  @override
  void initState() {
    super.initState();
    generateExampleDocument();
  }

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

          <table style="width:100%">
            <caption>Sample HTML Table</caption>
            <tr>
              <th>Month</th>
              <th>Savings</th>
            </tr>
            <tr>
              <td>January</td>
              <td>100</td>
            </tr>
            <tr>
              <td>February</td>
              <td>50</td>
            </tr>
          </table>

          <p>Image loaded from web</p>
          <img src="file:///storage/example/your_sample_image.png" alt="web-img">
          <img src="https://i.imgur.com/wxaJsXF.png" 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
      AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
          9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Base64 Image" style="height: 90%;" />
        </body>
      </html>
      """;

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

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

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

pubspec.yaml

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

Answer 1

我通常使用http://fluttericon.com来生成自己的字体文件，该文件可以包含来自许多主要库（例如“ Font Awesome”等）的图标。使用该工具，您可以下载ttf文件（以及配置文件，可用于在上述页面上进一步处理项目）。您还将获得一个dart文件，以方便引用您的图标。

此ttf文件应放在资产文件夹或子文件夹中的某个位置。然后在pubspec中执行：

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

将生成的带有图标常量的dart文件放入项目中的某个位置。我们称之为myfont_icons.dart。它看起来应该像这样：

import 'package:flutter/widgets.dart';

class MyFont {
  MyFont._();

  static const _kFontFam = 'MyFont';

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

因此，与使用CSS样式表进行Web开发的Web开发基本相同，在CSS样式表中，所有图标都由css类定义。

[在类中使用图标时，只需导入该dart文件并按如下方式使用它：

Icon(
  MyFont.people,
  size: 94,
),

Answer 2

您是否已将pubspec.yaml中的Assets文件夹直接包含在颤振内部，如下所示：>

flutter: assets: - assets/profyl.png

或

flutter: assets: - assets

用于添加整个资产文件夹

资产图片无法在flutter-ios中呈现。 [

问题描述投票：1回答：2

2个回答

最新问题

资产图片无法在flutter-ios中呈现。 [

问题描述 投票：1回答：2

2个回答

最新问题

问题描述投票：1回答：2