[Proof-of-concept] Image render API

example/lib/main.dart

@@ -1,6 +1,7 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_html/flutter_html.dart';
 import 'package:flutter_html/html_parser.dart';
+import 'package:flutter_html/image_render.dart';
 import 'package:flutter_html/style.dart';
 
 void main() => runApp(new MyApp());
@@ -119,6 +120,7 @@ const htmlData = """
       </p>
       <h3>Image support:</h3>
       <p>
+        <img alt='Flutter' src='https://flutter.dev/assets/flutter-lockup-1caf6476beed76adec3c477586da54de6b552b2f42108ec5bc68dc63bae2df75.png' />
         <img alt='Google' src='https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_92x30dp.png' />
         <a href='https://google.com'><img alt='Google' src='https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_92x30dp.png' /></a>
       </p>
@@ -184,6 +186,16 @@ class _MyHomePageState extends State<MyHomePage> {
               );
             },
           },
+          customImageRenders: {
+            networkSourceMatcher(domains: ["flutter.dev"]):
+                (context, attributes, element) {
+              return FlutterLogo(size: 36);
+            },
+            networkSourceMatcher(): networkImageRender(
+              headers: {"Custom-Header": "some-value"},
+              altWidget: (alt) => Text(alt),
+            ),
+          },
           onLinkTap: (url) {
             print("Opening $url...");
           },

lib/flutter_html.dart

@@ -2,6 +2,7 @@ library flutter_html;
 
 import 'package:flutter/material.dart';
 import 'package:flutter_html/html_parser.dart';
+import 'package:flutter_html/image_render.dart';
 import 'package:flutter_html/style.dart';
 import 'package:webview_flutter/webview_flutter.dart';
 
@@ -36,6 +37,7 @@ class Html extends StatelessWidget {
     @required this.data,
     this.onLinkTap,
     this.customRender,
+    this.customImageRenders = const {},
     this.onImageError,
     this.shrinkWrap = false,
     this.onImageTap,
@@ -46,6 +48,7 @@ class Html extends StatelessWidget {
 
   final String data;
   final OnTap onLinkTap;
+  final Map<ImageSourceMatcher, ImageRender> customImageRenders;
   final ImageErrorListener onImageError;
   final bool shrinkWrap;
 
@@ -80,6 +83,9 @@ class Html extends StatelessWidget {
         shrinkWrap: shrinkWrap,
         style: style,
         customRender: customRender,
+        imageRenders: {}
+          ..addAll(customImageRenders)
+          ..addAll(defaultImageRenders),
         blacklistedElements: blacklistedElements,
         navigationDelegateForIframe: navigationDelegateForIframe,
       ),

lib/html_parser.dart

@@ -5,6 +5,7 @@ import 'package:csslib/parser.dart' as cssparser;
 import 'package:csslib/visitor.dart' as css;
 import 'package:flutter/material.dart';
 import 'package:flutter_html/flutter_html.dart';
+import 'package:flutter_html/image_render.dart';
 import 'package:flutter_html/src/css_parser.dart';
 import 'package:flutter_html/src/html_elements.dart';
 import 'package:flutter_html/src/layout_element.dart';
@@ -31,6 +32,7 @@ class HtmlParser extends StatelessWidget {
 
   final Map<String, Style> style;
   final Map<String, CustomRender> customRender;
+  final Map<ImageSourceMatcher, ImageRender> imageRenders;
   final List<String> blacklistedElements;
   final NavigationDelegate navigationDelegateForIframe;
 
@@ -42,6 +44,7 @@ class HtmlParser extends StatelessWidget {
     this.shrinkWrap,
     this.style,
     this.customRender,
+    this.imageRenders,
     this.blacklistedElements,
     this.navigationDelegateForIframe,
   });

lib/image_render.dart

@@ -0,0 +1,97 @@
+import 'dart:convert';
+
+import 'package:flutter/material.dart';
+import 'package:flutter_html/html_parser.dart';
+import 'package:flutter_svg/flutter_svg.dart';
+import 'package:html/dom.dart' as dom;
+
+typedef ImageSourceMatcher = bool Function(
+  Map<String, String> attributes,
+  dom.Element element,
+);
+
+ImageSourceMatcher base64UriMatcher() => (attributes, element) =>
+    attributes["src"].startsWith("data:image") &&
+    attributes["src"].contains("base64,");
+
+ImageSourceMatcher networkSourceMatcher({
+  List<String> schemas: const ["https", "http"],
+  List<String> domains,
+  String extension,
+}) =>
+    (attributes, element) {
+      final src = Uri.parse(attributes["src"]);
+      return schemas.contains(src.scheme) &&
+          (domains == null || domains.contains(src.host)) &&
+          (extension == null || src.path.endsWith(".$extension"));
+    };
+
+typedef ImageRender = Widget Function(
+  RenderContext context,
+  Map<String, String> attributes,
+  dom.Element element,
+);
+
+ImageRender base64ImageRender() => (context, attributes, element) {
+      final decodedImage =
+          base64.decode(attributes["src"].split("base64,")[1].trim());
+      precacheImage(
+        MemoryImage(decodedImage),
+        context.buildContext,
+        onError: (exception, StackTrace stackTrace) {
+          context.parser.onImageError?.call(exception, stackTrace);
+        },
+      );
+      return Image.memory(
+        decodedImage,
+        frameBuilder: (ctx, child, frame, _) {
+          if (frame == null) {
+            return Text(attributes["alt"] ?? "",
+                style: context.style.generateTextStyle());
+          }
+          return child;
+        },
+      );
+    };
+
+ImageRender networkImageRender({
+  Map<String, String> headers,
+  double width,
+  double height,
+  Widget Function(String) altWidget,
+}) =>
+    (context, attributes, element) {
+      precacheImage(
+        NetworkImage(attributes["src"]),
+        context.buildContext,
+        onError: (exception, StackTrace stackTrace) {
+          context.parser.onImageError?.call(exception, stackTrace);
+        },
+      );
+      return Image.network(
+        attributes["src"],
+        headers: headers,
+        width: width,
+        height: height,
+        frameBuilder: (ctx, child, frame, _) {
+          if (frame == null) {
+            return altWidget.call(attributes["alt"]) ??
+                Text(attributes["alt"] ?? "",
+                    style: context.style.generateTextStyle());
+          }
+          return child;
+        },
+      );
+    };
+
+ImageRender svgNetworkImageRender() => (context, attributes, element) {
+      return SvgPicture.network(
+        attributes["src"],
+      );
+    };
+
+final Map<ImageSourceMatcher, ImageRender> defaultImageRenders = {
+  base64UriMatcher(): base64ImageRender(),
+  networkSourceMatcher(extension: "svg"): svgNetworkImageRender(),
+  networkSourceMatcher(): networkImageRender(),
+};

lib/src/replaced_element.dart

@@ -1,5 +1,3 @@
-import 'dart:async';
-import 'dart:convert';
 import 'dart:math';
 
 import 'package:chewie/chewie.dart';
@@ -10,7 +8,6 @@ import 'package:flutter/material.dart';
 import 'package:flutter/widgets.dart';
 import 'package:flutter_html/html_parser.dart';
 import 'package:flutter_html/src/html_elements.dart';
-import 'package:flutter_html/src/utils.dart';
 import 'package:flutter_html/style.dart';
 import 'package:flutter_svg/flutter_svg.dart';
 import 'package:html/dom.dart' as dom;
@@ -81,115 +78,15 @@ class ImageContentElement extends ReplacedElement {
 
   @override
   Widget toWidget(RenderContext context) {
-    Widget imageWidget;
-    if (src == null) {
-      imageWidget = Text(alt ?? "", style: context.style.generateTextStyle());
-    } else if (src.startsWith("data:image") && src.contains("base64,")) {
-      final decodedImage = base64.decode(src.split("base64,")[1].trim());
-      precacheImage(
-        MemoryImage(decodedImage),
-        context.buildContext,
-        onError: (exception, StackTrace stackTrace) {
-          context.parser.onImageError?.call(exception, stackTrace);
-        },
-      );
-      imageWidget = Image.memory(
-        decodedImage,
-        frameBuilder: (ctx, child, frame, _) {
-          if (frame == null) {
-            return Text(alt ?? "", style: context.style.generateTextStyle());
-          }
-          return child;
-        },
-      );
-    } else if (src.startsWith("asset:")) {
-      final assetPath = src.replaceFirst('asset:', '');
-      precacheImage(
-        AssetImage(assetPath),
-        context.buildContext,
-        onError: (exception, StackTrace stackTrace) {
-          context.parser.onImageError?.call(exception, stackTrace);
-        },
-      );
-      imageWidget = Image.asset(
-        assetPath,
-        frameBuilder: (ctx, child, frame, _) {
-          if (frame == null) {
-            return Text(alt ?? "", style: context.style.generateTextStyle());
-          }
-          return child;
-        },
-      );
-    } else if (src.endsWith(".svg")) {
-      return SvgPicture.network(src);
-    } else {
-      precacheImage(
-        NetworkImage(src),
-        context.buildContext,
-        onError: (exception, StackTrace stackTrace) {
-          context.parser.onImageError?.call(exception, stackTrace);
-        },
-      );
-      Completer<Size> completer = Completer();
-      Image image = Image.network(src, frameBuilder: (ctx, child, frame, _) {
-        if (frame == null) {
-          completer.completeError("error");
-          return child;
-        } else {
-          return child;
+    for (final entry in context.parser.imageRenders.entries) {
+      if (entry.key.call(attributes, element)) {
+        final widget = entry.value.call(context, attributes, element);
+        if (widget != null) {
+          return widget;
         }
-      });
-      image.image.resolve(ImageConfiguration()).addListener(
-            ImageStreamListener((ImageInfo image, bool synchronousCall) {
-              var myImage = image.image;
-              Size size =
-                  Size(myImage.width.toDouble(), myImage.height.toDouble());
-              completer.complete(size);
-            }, onError: (object, stacktrace) {
-              completer.completeError(object);
-            }),
-          );
-      imageWidget = FutureBuilder<Size>(
-        future: completer.future,
-        builder: (BuildContext buildContext, AsyncSnapshot<Size> snapshot) {
-          if (snapshot.hasData) {
-            return new Image.network(
-              src,
-              width: snapshot.data.width,
-              frameBuilder: (ctx, child, frame, _) {
-                if (frame == null) {
-                  return Text(alt ?? "",
-                      style: context.style.generateTextStyle());
-                }
-                return child;
-              },
-            );
-          } else if (snapshot.hasError) {
-            return Text(alt ?? "", style: context.style.generateTextStyle());
-          } else {
-            return new CircularProgressIndicator();
-          }
-        },
-      );
+      }
     }
-
-    return ContainerSpan(
-      style: style,
-      newContext: context,
-      shrinkWrap: context.parser.shrinkWrap,
-      child: RawGestureDetector(
-        child: imageWidget,
-        gestures: {
-          MultipleTapGestureRecognizer: GestureRecognizerFactoryWithHandlers<
-              MultipleTapGestureRecognizer>(
-            () => MultipleTapGestureRecognizer(),
-            (instance) {
-              instance..onTap = () => context.parser.onImageTap?.call(src);
-            },
-          ),
-        },
-      ),
-    );
+    return Container();
   }
 }