bloomPicture function

BloomNode bloomPicture({
  1. required List<PictureSource> sources,
  2. required String fallbackSrc,
  3. String? alt,
  4. bool decorative = false,
  5. int? width,
  6. int? height,
  7. String? aspectRatio,
  8. List<int>? fallbackWidths,
  9. String? sizes,
  10. ImageUrlBuilder? urlBuilder,
  11. ImageLoading loading = ImageLoading.lazy,
  12. ImageDecoding decoding = ImageDecoding.async,
  13. FetchPriority? fetchPriority,
  14. bool priority = false,
  15. String? placeholder,
  16. String? fallbackOnErrorSrc,
  17. ImageFit? fit,
  18. String? className,
  19. String? style,
  20. Map<String, String>? attrs,
  21. BloomEventHandler? onClick,
  22. BloomEventHandler? onLoad,
  23. BloomEventHandler? onError,
  24. Ref<Object>? ref,
})

Art-directed, multi-format <picture> element descriptor helper.

Encloses one or more PictureSource elements (e.g. AVIF, WebP, breakpoint variants) followed by an accessible fallback bloomImage descriptor.

Multi-Format Negotiation & Art Direction

Browsers evaluate <source> children in top-to-bottom order, selecting the first matching format or media query, and apply dimensions and styling from the inner <img>. This enables serving modern formats (AVIF, WebP) with automatic fallback to standard formats (JPEG, PNG) on older browsers.

SSR and Browser Compatibility

In SSR (renderToHtml), outputs a <picture> tag enclosing all <source> elements and the fallback <img>. In browser DOM (mount), builds the corresponding DOM hierarchy and attaches event listeners to the inner HTMLImageElement.

bloomPicture(
  sources: [
    PictureSource(
      src: '/images/hero.avif',
      type: 'image/avif',
      widths: [640, 1024, 1600],
    ),
    PictureSource(
      src: '/images/hero.webp',
      type: 'image/webp',
      widths: [640, 1024, 1600],
    ),
  ],
  fallbackSrc: '/images/hero.jpg',
  alt: 'Bloom Framework Dashboard',
  width: 1200,
  height: 600,
  priority: true,
);

See also:

  • BloomPicture, the picture element descriptor node.
  • PictureSource, specification for individual <source> tags.
  • bloomImage, responsive image helper used for the fallback <img>.

Implementation

BloomNode bloomPicture({
  required List<PictureSource> sources,
  required String fallbackSrc,
  String? alt,
  bool decorative = false,
  int? width,
  int? height,
  String? aspectRatio,
  List<int>? fallbackWidths,
  String? sizes,
  ImageUrlBuilder? urlBuilder,
  ImageLoading loading = ImageLoading.lazy,
  ImageDecoding decoding = ImageDecoding.async,
  FetchPriority? fetchPriority,
  bool priority = false,
  String? placeholder,
  String? fallbackOnErrorSrc,
  ImageFit? fit,
  String? className,
  String? style,
  Map<String, String>? attrs,
  BloomEventHandler? onClick,
  BloomEventHandler? onLoad,
  BloomEventHandler? onError,
  Ref<Object>? ref,
}) {
  return BloomPicture(
    sources: sources,
    fallbackSrc: fallbackSrc,
    alt: alt,
    decorative: decorative,
    width: width,
    height: height,
    aspectRatio: aspectRatio,
    fallbackWidths: fallbackWidths,
    sizes: sizes,
    urlBuilder: urlBuilder,
    loading: loading,
    decoding: decoding,
    fetchPriority: fetchPriority,
    priority: priority,
    placeholder: placeholder,
    fallbackOnErrorSrc: fallbackOnErrorSrc,
    fit: fit,
    className: className,
    style: style,
    attrs: attrs,
    onClick: onClick,
    onLoad: onLoad,
    onError: onError,
    ref: ref,
  );
}