Assets Images not rendering in flutter-ios. How to render local asset-images inside html <img src...> tag in flutter without using webview?
Solution 1
I generally use http://fluttericon.com 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:
fonts:
- family: MyFont
fonts:
- 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 {
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:
Icon(
MyFont.people,
size: 94,
),
Solution 2
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
jazzbpn
With 6+ years of experience, I have developed many iOS/android applications in different context, professional and oldest passion for computer programming began very early in my life. I've learned the social environment is as important as logic aspects of the developing approach then I appreciate very much to get in touch with positive and eager colleagues that involve me in new and exciting challenges. This is why I still want to get involved in new opportunities to improve my skillness.
Updated on December 14, 2022Comments
-
jazzbpn over 1 year
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