Universal Web Image for Flutter Web apps with external hosted images.

Features

• Show an image as html image, if necessary.
• Distinguish between svg images and others automatically

Motivation

If you try to load an image without valid XHR status 200, an error is thrown and the image does not become visible on web.

Failed to load network image.
Image URL: https://example.com/invalidConfiguredServerImage.jpg
Trying to load an image from another domain? Find answers at:
https://flutter.cn/docs/development/platform-integration/web-images

This package solves the issue by using a Web Image as fallback.

Usage

import 'package:flutter/material.dart';
import 'package:universal_web_image/universal_web_image.dart';

class MyHomePage extends StatelessWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  // 424x283
  static const validImageUrl = 'https://www.kesselheld.de/content/uploads/2018/09/durchschnittliche-heizkosten.jpg';

  // 640x300
  static const invalidImageUrl = 'https://img.utopia.de/cH68CrxH2UEqUr8eVAWC-BCgXoU=/640x300/https://utopia.de/app/uploads/2019/02/richtig-heizen-wpb-ivan-kruk-ri-190820-1280x720.jpg';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          children: [
            const Text(
              'Web Image with valid XHR 200 status',
            ),
            const UniversalWebImage(
              imageUrl: validImageUrl,
              width: 424,
              height: 283,
            ),
            const Text(
              'Web Image with invalid XHR 0 status',
            ),
            const UniversalWebImage(
              imageUrl: invalidImageUrl,
              width: 640,
              height: 300,
            ),
            const Text(
              'Regular image with invalid XHR 0 status',
            ),
            Image.network(
              invalidImageUrl,
              width: 640,
              height: 300,
            ),
          ],
        ),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}