[web] On the web platform, use an <img> tag to show an image if it can't be accessed with CORS (#157755)

When using `Image.network`, if the given URL points to an image that is
cross-origin and not set up to allow CORS access, then we are unable to
make a [ui.Image] from it. In this case, render the image using a
platform view.

This is the last remaining checklist item for
flutter/flutter#145954

Fixes flutter/flutter#149843

## Pre-launch Checklist

- [x] I read the [Contributor Guide] and followed the process outlined
there for submitting PRs.
- [x] I read the [Tree Hygiene] wiki page, which explains my
responsibilities.
- [x] I read and followed the [Flutter Style Guide], including [Features
we expect every widget to implement].
- [x] I signed the [CLA].
- [x] I listed at least one issue that this PR fixes in the description
above.
- [x] I updated/added relevant documentation (doc comments with `///`).
- [x] I added new tests to check the change I am making, or this PR is
[test-exempt].
- [x] I followed the [breaking change policy] and added [Data Driven
Fixes] where supported.
- [x] All existing and new tests are passing.

If you need help, consider asking for advice on the #hackers-new channel
on [Discord].

<!-- Links -->
[Contributor Guide]:
https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md#overview
[Tree Hygiene]:
https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md
[test-exempt]:
https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md#tests
[Flutter Style Guide]:
https://github.com/flutter/flutter/blob/main/docs/contributing/Style-guide-for-Flutter-repo.md
[Features we expect every widget to implement]:
https://github.com/flutter/flutter/blob/main/docs/contributing/Style-guide-for-Flutter-repo.md#features-we-expect-every-widget-to-implement
[CLA]: https://cla.developers.google.com/
[flutter/tests]: https://github.com/flutter/tests
[breaking change policy]:
https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md#handling-breaking-changes
[Discord]:
https://github.com/flutter/flutter/blob/main/docs/contributing/Chat.md
[Data Driven Fixes]:
https://github.com/flutter/flutter/blob/main/docs/contributing/Data-driven-Fixes.md

Author: harryterkelsen

packages/flutter/lib/src/painting/_network_image_web.dart

@@ -10,28 +10,52 @@ import 'dart:ui_web' as ui_web;
 import 'package:flutter/foundation.dart';
 
 import '../web.dart' as web;
+import '_web_image_info_web.dart';
 import 'image_provider.dart' as image_provider;
 import 'image_stream.dart';
 
-/// Creates a type for an overridable factory function for testing purposes.
+/// The type for an overridable factory function for creating an HTTP request,
+/// used for testing purposes.
 typedef HttpRequestFactory = web.XMLHttpRequest Function();
 
+/// The type for an overridable factory function for creating <img> elements,
+/// used for testing purposes.
+typedef ImgElementFactory = web.HTMLImageElement Function();
+
 // Method signature for _loadAsync decode callbacks.
 typedef _SimpleDecoderCallback = Future<ui.Codec> Function(ui.ImmutableBuffer buffer);
 
-/// Default HTTP client.
+/// The default HTTP client.
 web.XMLHttpRequest _httpClient() {
   return web.XMLHttpRequest();
 }
 
 /// Creates an overridable factory function.
+@visibleForTesting
 HttpRequestFactory httpRequestFactory = _httpClient;
 
-/// Restores to the default HTTP request factory.
+/// Restores the default HTTP request factory.
+@visibleForTesting
 void debugRestoreHttpRequestFactory() {
   httpRequestFactory = _httpClient;
 }
 
+/// The default <img> element factory.
+web.HTMLImageElement _imgElementFactory() {
+  return web.document.createElement('img') as web.HTMLImageElement;
+}
+
+/// The factory function that creates <img> elements, can be overridden for
+/// tests.
+@visibleForTesting
+ImgElementFactory imgElementFactory = _imgElementFactory;
+
+/// Restores the default <img> element factory.
+@visibleForTesting
+void debugRestoreImgElementFactory() {
+  imgElementFactory = _imgElementFactory;
+}
+
 /// The web implementation of [image_provider.NetworkImage].
 ///
 /// NetworkImage on the web does not support decoding to a specified size.
@@ -64,12 +88,14 @@ class NetworkImage
     final StreamController<ImageChunkEvent> chunkEvents =
         StreamController<ImageChunkEvent>();
 
-    return MultiFrameImageStreamCompleter(
-      chunkEvents: chunkEvents.stream,
-      codec: _loadAsync(key as NetworkImage, decode, chunkEvents),
-      scale: key.scale,
-      debugLabel: key.url,
+    return _ForwardingImageStreamCompleter(
+      _loadAsync(
+        key as NetworkImage,
+        decode,
+        chunkEvents,
+      ),
       informationCollector: _imageStreamInformationCollector(key),
+      debugLabel: key.url,
     );
   }
 
@@ -80,12 +106,14 @@ class NetworkImage
     // has been loaded or an error is thrown.
     final StreamController<ImageChunkEvent> chunkEvents = StreamController<ImageChunkEvent>();
 
-    return MultiFrameImageStreamCompleter(
-      chunkEvents: chunkEvents.stream,
-      codec: _loadAsync(key as NetworkImage, decode, chunkEvents),
-      scale: key.scale,
-      debugLabel: key.url,
+    return _ForwardingImageStreamCompleter(
+      _loadAsync(
+        key as NetworkImage,
+        decode,
+        chunkEvents,
+      ),
       informationCollector: _imageStreamInformationCollector(key),
+      debugLabel: key.url,
     );
   }
 
@@ -101,10 +129,10 @@ class NetworkImage
     return collector;
   }
 
-  // Html renderer does not support decoding network images to a specified size. The decode parameter
+  // HTML renderer does not support decoding network images to a specified size. The decode parameter
   // here is ignored and `ui_web.createImageCodecFromUrl` will be used directly
   // in place of the typical `instantiateImageCodec` method.
-  Future<ui.Codec> _loadAsync(
+  Future<ImageStreamCompleter> _loadAsync(
     NetworkImage key,
     _SimpleDecoderCallback decode,
     StreamController<ImageChunkEvent> chunkEvents,
@@ -117,60 +145,141 @@ class NetworkImage
 
     // We use a different method when headers are set because the
     // `ui_web.createImageCodecFromUrl` method is not capable of handling headers.
-    if (isSkiaWeb || containsNetworkImageHeaders) {
-      final Completer<web.XMLHttpRequest> completer =
-          Completer<web.XMLHttpRequest>();
-      final web.XMLHttpRequest request = httpRequestFactory();
-
-      request.open('GET', key.url, true);
-      request.responseType = 'arraybuffer';
-      if (containsNetworkImageHeaders) {
-        key.headers!.forEach((String header, String value) {
-          request.setRequestHeader(header, value);
-        });
+    if (containsNetworkImageHeaders) {
+      // It is not possible to load an <img> element and pass the headers with
+      // the request to fetch the image. Since the user has provided headers,
+      // this function should assume the headers are required to resolve to
+      // the correct resource and should not attempt to load the image in an
+      // <img> tag without the headers.
+
+      // Resolve the Codec before passing it to
+      // [MultiFrameImageStreamCompleter] so any errors aren't reported
+      // twice (once from the MultiFrameImageStreamCompleter and again
+      // from the wrapping [ForwardingImageStreamCompleter]).
+      final ui.Codec codec = await _fetchImageBytes(decode);
+      return MultiFrameImageStreamCompleter(
+        chunkEvents: chunkEvents.stream,
+        codec: Future<ui.Codec>.value(codec),
+        scale: key.scale,
+        debugLabel: key.url,
+        informationCollector: _imageStreamInformationCollector(key),
+      );
+    } else if (isSkiaWeb) {
+      try {
+        // Resolve the Codec before passing it to
+        // [MultiFrameImageStreamCompleter] so any errors aren't reported
+        // twice (once from the MultiFrameImageStreamCompleter and again
+        // from the wrapping [ForwardingImageStreamCompleter]).
+        final ui.Codec codec = await _fetchImageBytes(decode);
+        return MultiFrameImageStreamCompleter(
+          chunkEvents: chunkEvents.stream,
+          codec: Future<ui.Codec>.value(codec),
+          scale: key.scale,
+          debugLabel: key.url,
+          informationCollector: _imageStreamInformationCollector(key),
+        );
+      } catch (e) {
+        // If we failed to fetch the bytes, try to load the image in an <img>
+        // element instead.
+        final web.HTMLImageElement imageElement = imgElementFactory();
+        imageElement.src = key.url;
+        // Decode the <img> element before creating the ImageStreamCompleter
+        // to avoid double reporting the error.
+        await imageElement.decode().toDart;
+        return OneFrameImageStreamCompleter(
+          Future<ImageInfo>.value(
+            WebImageInfo(
+              imageElement,
+              debugLabel: key.url,
+            ),
+          ),
+          informationCollector: _imageStreamInformationCollector(key),
+        )..debugLabel = key.url;
       }
+    } else {
+      // This branch is only hit by the HTML renderer, which is deprecated. The
+      // HTML renderer supports loading images with CORS restrictions, so we
+      // don't need to catch errors and try loading the image in an <img> tag
+      // in this case.
+
+      // Resolve the Codec before passing it to
+      // [MultiFrameImageStreamCompleter] so any errors aren't reported
+      // twice (once from the MultiFrameImageStreamCompleter) and again
+      // from the wrapping [ForwardingImageStreamCompleter].
+      final ui.Codec codec = await ui_web.createImageCodecFromUrl(
+          resolved,
+          chunkCallback: (int bytes, int total) {
+            chunkEvents.add(ImageChunkEvent(
+                cumulativeBytesLoaded: bytes, expectedTotalBytes: total));
+          },
+        );
+      return MultiFrameImageStreamCompleter(
+        chunkEvents: chunkEvents.stream,
+        codec: Future<ui.Codec>.value(codec),
+        scale: key.scale,
+        debugLabel: key.url,
+        informationCollector: _imageStreamInformationCollector(key),
+      );
+    }
+  }
 
-      request.addEventListener('load', (web.Event e) {
-        final int status = request.status;
-        final bool accepted = status >= 200 && status < 300;
-        final bool fileUri = status == 0; // file:// URIs have status of 0.
-        final bool notModified = status == 304;
-        final bool unknownRedirect = status > 307 && status < 400;
-        final bool success =
-            accepted || fileUri || notModified || unknownRedirect;
+  Future<ui.Codec> _fetchImageBytes(
+    _SimpleDecoderCallback decode,
+  ) async {
+    final Uri resolved = Uri.base.resolve(url);
 
-        if (success) {
-          completer.complete(request);
-        } else {
-          completer.completeError(e);
-          throw image_provider.NetworkImageLoadException(
-              statusCode: status, uri: resolved);
-        }
-      }.toJS);
+    final bool containsNetworkImageHeaders = headers?.isNotEmpty ?? false;
 
-      request.addEventListener('error',
-          ((JSObject e) => completer.completeError(e)).toJS);
+    final Completer<web.XMLHttpRequest> completer =
+        Completer<web.XMLHttpRequest>();
+    final web.XMLHttpRequest request = httpRequestFactory();
 
-      request.send();
+    request.open('GET', url, true);
+    request.responseType = 'arraybuffer';
+    if (containsNetworkImageHeaders) {
+      headers!.forEach((String header, String value) {
+        request.setRequestHeader(header, value);
+      });
+    }
 
-      await completer.future;
+    request.addEventListener('load', (web.Event e) {
+      final int status = request.status;
+      final bool accepted = status >= 200 && status < 300;
+      final bool fileUri = status == 0; // file:// URIs have status of 0.
+      final bool notModified = status == 304;
+      final bool unknownRedirect = status > 307 && status < 400;
+      final bool success =
+          accepted || fileUri || notModified || unknownRedirect;
+
+      if (success) {
+        completer.complete(request);
+      } else {
+        completer.completeError(image_provider.NetworkImageLoadException(
+            statusCode: status, uri: resolved));
+      }
+    }.toJS);
+
+    request.addEventListener(
+      'error',
+      ((JSObject e) =>
+          completer.completeError(image_provider.NetworkImageLoadException(
+            statusCode: request.status,
+            uri: resolved,
+          ))).toJS,
+    );
 
-      final Uint8List bytes = (request.response! as JSArrayBuffer).toDart.asUint8List();
+    request.send();
 
-      if (bytes.lengthInBytes == 0) {
-        throw image_provider.NetworkImageLoadException(
-            statusCode: request.status, uri: resolved);
-      }
-      return decode(await ui.ImmutableBuffer.fromUint8List(bytes));
-    } else {
-      return ui_web.createImageCodecFromUrl(
-        resolved,
-        chunkCallback: (int bytes, int total) {
-          chunkEvents.add(ImageChunkEvent(
-              cumulativeBytesLoaded: bytes, expectedTotalBytes: total));
-        },
-      );
+    await completer.future;
+
+    final Uint8List bytes = (request.response! as JSArrayBuffer).toDart.asUint8List();
+
+    if (bytes.lengthInBytes == 0) {
+      throw image_provider.NetworkImageLoadException(
+          statusCode: request.status, uri: resolved);
     }
+
+    return decode(await ui.ImmutableBuffer.fromUint8List(bytes));
   }
 
   @override
@@ -187,3 +296,61 @@ class NetworkImage
   @override
   String toString() => '${objectRuntimeType(this, 'NetworkImage')}("$url", scale: ${scale.toStringAsFixed(1)})';
 }
+
+/// An [ImageStreamCompleter] that delegates to another [ImageStreamCompleter]
+/// that is loaded asynchronously.
+///
+/// This completer keeps its child completer alive until this completer is disposed.
+class _ForwardingImageStreamCompleter extends ImageStreamCompleter {
+  _ForwardingImageStreamCompleter(this.task,
+      {InformationCollector? informationCollector, String? debugLabel}) {
+    this.debugLabel = debugLabel;
+    task.then((ImageStreamCompleter value) {
+      resolved = true;
+      if (_disposed) {
+        // Add a listener since the delegate completer won't dispose if it never
+        // had a listener.
+        value.addListener(ImageStreamListener((_, __) {}));
+        value.maybeDispose();
+        return;
+      }
+      completer = value;
+      handle = completer.keepAlive();
+      completer.addListener(ImageStreamListener(
+        (ImageInfo image, bool synchronousCall) {
+          setImage(image);
+        },
+        onChunk: (ImageChunkEvent event) {
+          reportImageChunkEvent(event);
+        },
+        onError:(Object exception, StackTrace? stackTrace) {
+          reportError(exception: exception, stack: stackTrace);
+        },
+      ));
+    }, onError: (Object error, StackTrace stack) {
+      reportError(
+        context: ErrorDescription('resolving an image stream completer'),
+        exception: error,
+        stack: stack,
+        informationCollector: informationCollector,
+        silent: true,
+      );
+    });
+  }
+
+  final Future<ImageStreamCompleter> task;
+  bool resolved = false;
+  late final ImageStreamCompleter completer;
+  late final ImageStreamCompleterHandle handle;
+
+  bool _disposed = false;
+
+  @override
+  void onDisposed() {
+    if (resolved) {
+      handle.dispose();
+    }
+    _disposed = true;
+    super.onDisposed();
+  }
+}

packages/flutter/lib/src/painting/_web_image_info_io.dart

@@ -0,0 +1,40 @@
+// Copyright 2014 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import 'dart:ui' as ui;
+
+import 'image_stream.dart';
+
+/// An [ImageInfo] object indicating that the image can only be displayed in
+/// an <img> element, and no [dart:ui.Image] can be created for it.
+///
+/// This occurs on the web when the image resource is from a different origin
+/// and is not configured for CORS. Since the image bytes cannot be directly
+/// fetched, [ui.Image]s cannot be created from it. However, the image can
+/// still be displayed if an <img> element is used.
+class WebImageInfo implements ImageInfo {
+  @override
+  ImageInfo clone() => _unsupported();
+
+  @override
+  String? get debugLabel => _unsupported();
+
+  @override
+  void dispose() => _unsupported();
+
+  @override
+  ui.Image get image => _unsupported();
+
+  @override
+  bool isCloneOf(ImageInfo other) => _unsupported();
+
+  @override
+  double get scale => _unsupported();
+
+  @override
+  int get sizeBytes => _unsupported();
+
+  Never _unsupported() => throw UnsupportedError(
+      'WebImageInfo should never be instantiated in a non-web context.');
+}