How to use ImageExtension ?

[zxl777]

I previously added rounded corners to <img> tags in an older version of flutter_html, but how should I achieve the same effect with the new ImageExtension?

                    customRender: {
                      'img': (context, child) {
                        return ClipRRect(
                          borderRadius: BorderRadius.circular(5.0),
                          child: (context.tree as ImageContentElement).toWidget(context),
                        );
                      }
                    }

[azeunkn0wn]

Try this:

 ImageExtension(
     builder: (extensionContext) {
          final element = extensionContext.styledElement as ImageElement;
             
          return ClipRRect(
              borderRadius: BorderRadius.circular(5.0),                         
              child: Image.network(
                  element.src,
                ),
              );
            },
          ),

[leeparayno]

In current 3.0.0-beta.2 ImageElement is not defined for me. What is the current status of img tag?

[ilikerobots]

A bit hacky, but you can cast styledElement to dynamic:
final url = (extensionContext.styledElement as dynamic).src;

[Sub6Resources]

TagWrapExtension should achieve the same result without the hacks. This still needs to be documented better, sorry!