资产图像未在 flutter-ios 中渲染。如何在不使用 webview 的情况下在 flutter 中渲染 html <img src...> 标签内的本地资源图像？
jaz*_*bpn 5 html assets image dart-html flutter
我正在使用 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
我通常使用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);
}
因此，它基本上与您在 Web 开发中使用 CSS 样式表时遇到的情况基本相同，其中所有图标都是使用 css 类定义的。
在类中使用图标时，只需导入该 dart 文件并像这样使用它：
Icon(
MyFont.people,
size: 94,
),
| 归档时间： |
|
| 查看次数： |
2592 次 |
| 最近记录： |