Support relative paths for network image rendering via custom image r…

…ender API Fixes Sub6Resources#153 and closes Sub6Resources#146
vrtdev · Feb 8, 2021 · 02465f6 · 02465f6
1 parent e8f50ed
commit 02465f6
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 3 deletions.
diff --git a/example/lib/main.dart b/example/lib/main.dart
@@ -127,6 +127,8 @@ const htmlData = """
       <img src='asset:assets/mac.svg' width='100' />
       <h3>Base64</h3>
       <img alt='Red dot' src='data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==' />
+      <h3>Custom source matcher (relative paths)</h3>
+      <img src='/wikipedia/commons/thumb/e/ef/Octicons-logo-github.svg/200px-Octicons-logo-github.svg.png' />
       <h3>Custom image render (flutter.dev)</h3>
       <img src='https://flutter.dev/images/flutter-mono-81x100.png' />
       <h3>No image source</h3>
@@ -175,6 +177,8 @@ class _MyHomePageState extends State<MyHomePage> {
               headers: {"Custom-Header": "some-value"},
               altWidget: (alt) => Text(alt),
             ),
+            (attr, _) => attr["src"] != null && attr["src"].startsWith("/wiki"):
+                networkImageRender(baseUrl: "https://upload.wikimedia.org"),
           },
           onLinkTap: (url) {
             print("Opening $url...");

diff --git a/lib/image_render.dart b/lib/image_render.dart
@@ -90,14 +90,17 @@ ImageRender assetImageRender({
 
 ImageRender networkImageRender({
   Map<String, String> headers,
+  String baseUrl,
   double width,
   double height,
   Widget Function(String) altWidget,
 }) =>
     (context, attributes, element) {
+      final src =
+          baseUrl != null ? baseUrl + _src(attributes) : _src(attributes);
       precacheImage(
         NetworkImage(
-          _src(attributes),
+          src,
           headers: headers,
         ),
         context.buildContext,
@@ -107,7 +110,7 @@ ImageRender networkImageRender({
       );
       Completer<Size> completer = Completer();
       Image image =
-          Image.network(_src(attributes), frameBuilder: (ctx, child, frame, _) {
+          Image.network(src, frameBuilder: (ctx, child, frame, _) {
         if (frame == null) {
           if (!completer.isCompleted) {
             completer.completeError("error");
@@ -137,7 +140,7 @@ ImageRender networkImageRender({
         builder: (BuildContext buildContext, AsyncSnapshot<Size> snapshot) {
           if (snapshot.hasData) {
             return Image.network(
-              _src(attributes),
+              src,
               headers: headers,
               width: width ?? _width(attributes) ?? snapshot.data.width,
               height: height ?? _height(attributes),