flutter_html_img_alt #

A flutter_html extension that renders the alt text of an <img> whose src the built-in image renderer declines. flutter_html 3.0.0 renders nothing for one of those, not even the alt text. List this extension after every extension that renders images. An <img> with no alt, or with alt="", still renders nothing.

Features #

• Renders the alt text as inline text, in the element's own cascaded style.
• Matches an <img> that carries alt text and whose src the built-in renderer declines: an SVG, a source outside its scheme, domain, MIME-type or file-extension lists, or an <img> with no src.
• Declines every image the built-in renderer renders, so no picture becomes text.
• Takes the source-matching arguments of ImageBuiltIn, with the same defaults. It takes no assetSchema, networkHeaders, assetBundle or assetPackage.

Getting started #

dependencies:
  flutter_html: ^3.0.0
  flutter_html_img_alt: ^0.2.0

Usage #

import 'package:flutter_html/flutter_html.dart';
import 'package:flutter_html_img_alt/flutter_html_img_alt.dart';

Html(
  data: '<p>Revenue <img src="https://example.com/chart.svg" alt="up 4%"> so far.</p>',
  extensions: const [ImgAltHtmlExtension()],
);

Without the extension that paragraph renders Revenue so far. There is no error and no warning.

An inline style on the <img> styles its alt text.

<img src="a.svg" alt="Sales, 2026" style="color: #777777; font-style: italic;">

Before you register it #

This extension matches an <img> at the preparing step. No built-in claims a declined <img> there, and WhitespaceProcessing then deletes the element before the building step. At the building step this extension matches the ImgAltElement it prepared, and nothing else.

List it after any extension that renders images. flutter_html prepares an element with the first extension in the list that matches it. Listed before an ImageExtension that widens the accepted sources, this extension turns an image that extension renders into text. There is no error and no warning.

Html(
  data: '<img src="bundle:photo.png" alt="Sales, 2026">',
  extensions: [
    ImageExtension(
      assetSchema: 'bundle:',
      builder: (context) =>
          Image.asset(context.attributes['src']!.replaceFirst('bundle:', '')),
    ),
    const ImgAltHtmlExtension(), // must come last; renders the alt text otherwise
  ],
);

A TagExtension for img takes the element from this extension when it is listed first, because it matches at every step. No alt text then renders. Listed after this extension it never sees a declined image, and it still replaces every image that loads. There is no error and no warning in either order. Use a TagWrapExtension if you want both.

Order against flutter_html_css_object_fit does not matter. That extension renders the images this one declines, and this one renders the elements it declines. Both orders are measured in doc/composition.md, with flutter_html_css_border_radius 0.1.1.

Limitations #

• An <img> with no alt, with alt="", or with an alt of white space alone renders nothing. HTML marks a decorative image that way. There is no error and no warning.
• No image loads. This extension renders text for an image flutter_html never fetches. The alt fallback for an image that fails to load is ImageBuiltIn's errorBuilder, and it works without this package.
• The text has no box. width, height, padding, margin, border and background-color on the <img> do not apply to it. Text properties do. There is no error and no warning.
• title, srcset and sizes are not read.

Full list: doc/limitations.md.

Additional information #

Issues and merge requests go to the GitLab repository. Rendering object-fit on the images that do load is flutter_html_css_object_fit's job.

CI, publishing and Renovate are described in CONTRIBUTING.md.