FlutterWebでCORSエラーになる画像を<img>タグで表示する

WebHtmlElementStrategy

Flutter 3.29でImage.networkのパラメータにwebHtmlElementStrategyが追加されました。
このwebHtmlElementStrategyパラメータによって、CORSエラーになる画像を<img>タグを使った表示の使い方が選択できるようになりました。このオプションはFlutter Webのみサポートされています。

enum WebHtmlElementStrategy {
  // バイナリフェッチのみ
  never,

  // バイナリフェッチで表示。失敗したらHTMLタグ表示にフォールバック
  fallback,

  // HTMLタグ表示で表示。失敗したらバイナリフェッチにフォールバック
  prefer,
}

https://github.com/flutter/flutter/pull/159917

webHtmlElementStrategy.preferのデモ

DartPadでWebHtmlElementStrategy.preferを指定し、画像を表示してみます。

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Image.network(
            'https://i.gyazo.com/35fe01c334a2e737a1382857046d036c.png',
            webHtmlElementStrategy: WebHtmlElementStrategy.prefer,
          ),
        ),
      ),
    );
  }
}

<img>タグを使った表示になっていることが確認できました。

上記のコードは以下のリンクから実行できます。

https://dartpad.dev/c6662b8b0c84fa0072f275f144341341

Flutter3.29現在、HTMLタグによる表示はPlatformViewが使われます。
これは高価な処理なので、バックエンドでのCORSエラー対応が望ましいです。

不具合

設定がキャッシュされるため、別々のパラメータを指定できないようです。

https://github.com/flutter/flutter/issues/164405

BotFitのパラメータが機能していないようです。

https://github.com/flutter/flutter/issues/163288

まとめ

• Image.networkのパラメータにwebHtmlElementStrategyが追加された
• webHtmlElementStrategyはnever, fallback, preferの3種類
• PlatformViewでの表示であったり、不具合があったりまだ不安定かも

簡易なアプリであれば十分使える範囲で、個人的に嬉しい機能でした!