素材资源无法在flutter-ios中呈现的图像.如何在html< img src ...>内部渲染本地资产图像在不使用webview的情况下进行标记? [英] Assets Images not rendering in flutter-ios. How to render local asset-images inside html <img src...> tag in flutter without using webview?

问题描述

完整源代码:

RenderHtml.dart

  import'package:flutter/material.dart';导入'dart:async';导入'dart:io';导入'package:flutter_full_pdf_viewer/flutter_full_pdf_viewer.dart';导入'package:flutter_html_to_pdf/flutter_html_to_pdf.dart';导入'package:path_provider/path_provider.dart';void main(){runApp(MaterialApp(主页:MyApp()，))；}var base64Image =";MyApp类扩展了StatefulWidget {@override_MyAppState createState()=>_MyAppState();}类别_MyAppState扩展了State< MyApp>{字符串generatePdfFilePath;@override无效的initState(){super.initState();generateExampleDocument();}Future< void>generateExampleDocument()异步{var htmlContent ="<！DOCTYPE html>< html>< head>< style>桌子，th，td {边框:1px纯黑色；边界崩溃:崩溃；}th，td，p {内边距:5px；文字对齐:左；}</style></head><身体>< h2>使用flutter_html_to_pdf插件生成的PDF</h2>< table style ="width:100％">< caption>样本HTML表</caption>< tr>< th>月</th><储蓄</th></tr>< tr>< td>一月</td>< td> 100</td></tr>< tr>< td> 2月< td>< td> 50</td></tr></table>< p>从网上加载的图像</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 =资产-img">< img src ="assets/profyl.jpg" alt =资产-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，iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg =="alt =" Base64图像"style =" height:90％;"/></body></html>";目录appDocDir =等待getApplicationDocumentsDirectory();var targetPath = appDocDir.path;var targetFileName ="example-pdf";var generatePdfFile =等待FlutterHtmlToPdf.convertFromHtmlContent(htmlContent，targetPath，targetFileName)；createdPdfFilePath = generatePdfFile.path;}@override窗口小部件build(BuildContext context){返回MaterialApp(家:脚手架(appBar:AppBar()，身体:中心(子代:RaisedButton(子级:Text("Open Generated PDF Preview")，onPressed:()=>Navigator.push(语境，MaterialPageRoute(生成器:(上下文)=>PDFViewerScaffold(appBar:AppBar(标题:文本("Generated PDF Document"))，路径:generatePdfFilePath))，)，)，)，))；}} 

pubspec.yaml

  flutter_full_pdf_viewer:^ 1.0.4flutter_html_to_pdf:^ 0.5.2印刷:^ 2.1.7路径提供者:^ 1.3.0 

解决方案

您是否已将pubspec.yaml中的Assets文件夹直接包含在flutter之内

  flutter:资产:-资产/profyl.png 

或

 颤动:资产:-资产 

用于添加整个资产文件夹

更新:

正如我指出的那样，您在HTML中的路径名不正确.我在下面尝试了各种路径名:

 < img src ="https://i.imgur.com/wxaJsXF.png" 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 ="/用户/Faisal/Projects/Flutter_Apps/flutter_app/assets/f.png" alt ="web-img6"> 

如您在图像中所见，3个路径名在本地工作，而3个不在本地.

来自苹果模拟器的屏幕截图

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?

iOS-Screenshot:

Full Source Code:

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

解决方案

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

flutter:
 assets:
  - assets/profyl.png

or

 flutter:
  assets:
  - assets

for adding whole assets folder

Update:

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

      <img src="https://i.imgur.com/wxaJsXF.png" 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

这篇关于素材资源无法在flutter-ios中呈现的图像.如何在html< img src ...>内部渲染本地资产图像在不使用webview的情况下进行标记?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！