Fix image alt attribute (fixes #96)

Sub6Resources · Sep 9, 2019 · f1fe495 · f1fe495
1 parent 247a8f3
commit f1fe495
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 16 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,7 +1,8 @@
 ## [0.11.0] - September 6, 2019:
 
 * Make it so `width=100%` doesn't throw error. Fixes [#118](https://github.com/Sub6Resources/flutter_html/issues/118).
-* You can now set width and/or height in `ImageProperties` to negative to ignore the `width` and/or `height` values from the html.
+* You can now set width and/or height in `ImageProperties` to negative to ignore the `width` and/or `height` values from the html. Fixes [#97](https://github.com/Sub6Resources/flutter_html/issues/97)
+* The `img` `alt` property now renders correctly when the image fails to load and with the correct style. Fixes [#96](https://github.com/Sub6Resources/flutter_html/issues/96)
 
 ## [0.10.4] - June 22, 2019:
 

diff --git a/lib/rich_text_parser.dart b/lib/rich_text_parser.dart
@@ -1,4 +1,5 @@
 import 'dart:convert';
+import 'dart:io';
 
 import 'package:flutter/gestures.dart';
 import 'package:flutter/material.dart';
@@ -753,7 +754,7 @@ class HtmlRichTextParser extends StatelessWidget {
                       ),
                     ),
                     buildContext,
-                    onError: onImageError,
+                    onError: onImageError ?? (_,__) {},
                   );
                   parseContext.rootWidgetList.add(GestureDetector(
                     child: Image.memory(
@@ -788,11 +789,28 @@ class HtmlRichTextParser extends StatelessWidget {
                   precacheImage(
                     NetworkImage(node.attributes['src']),
                     buildContext,
-                    onError: onImageError,
+                    onError: onImageError ?? (_,__) {},
                   );
                   parseContext.rootWidgetList.add(GestureDetector(
                     child: Image.network(
                       node.attributes['src'],
+                      frameBuilder: (context, child, frame, _) {
+                        if (node.attributes['alt'] != null && frame == null) {
+                          return BlockText(
+                            child: RichText(
+                              textAlign: TextAlign.center,
+                              text: TextSpan(
+                                text: node.attributes['alt'],
+                                style: nextContext.childStyle,
+                              ),
+                            )
+                          );
+                        }
+                        if (frame != null) {
+                          return child;
+                        }
+                        return Container();
+                      },
                       width: (width ?? -1) > 0? width: null,
                       height: (height ?? -1) > 0? height: null,
                       scale: imageProperties?.scale ?? 1.0,
@@ -819,19 +837,6 @@ class HtmlRichTextParser extends StatelessWidget {
                     },
                   ));
                 }
-                if (node.attributes['alt'] != null) {
-                  parseContext.rootWidgetList.add(BlockText(
-                      margin:
-                          EdgeInsets.symmetric(horizontal: 0.0, vertical: 10.0),
-                      padding: EdgeInsets.all(0.0),
-                      child: RichText(
-                          textAlign: TextAlign.center,
-                          text: TextSpan(
-                            text: node.attributes['alt'],
-                            style: nextContext.childStyle,
-                            children: <TextSpan>[],
-                          ))));
-                }
               }
             }
             break;