Flutter无法从url加载图像

════════图片资源服务捕获异常════════════════════════════ 解析图像编解码器时抛出以下 ImageCodecException： 加载网络图像失败。 图片网址：https://cdn.sportmonks.com/images/soccer/leagues/5.png https://cdn.sportmonks.com/images/soccer/leagues/5.png尝试从另一个域加载图像？寻找答案：https://flutter.dev/docs/development/platform-integration/web-images https://flutter.dev/docs/development/platform-integration/web-images

当我尝试演示 URL 时https://picsum.photos/250?image=9 https://picsum.photos/250?image=9它可以工作，但上面的 url 很好，那么可能是什么问题呢？

class ListRow extends StatelessWidget {
  final String name;
  final imageUrl;
  const ListRow({Key key, this.name, this.imageUrl}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Row(
      crossAxisAlignment: CrossAxisAlignment.center,
      mainAxisAlignment: MainAxisAlignment.start,
      children: <Widget>[
        Container(
          width: 18,
          height: 18,
          child: Image(
            image: NetworkImage(
                'https://cdn.sportmonks.com/images/soccer/leagues/5.png'),
          ),
        ),
        SizedBox(width: 10),
        Flexible(
          child: new Text(
            name,
            style:
                new TextStyle(fontWeight: FontWeight.bold, color: Colors.black),
          ),
        ),
      ],
    );
  }
}

所以flutter web升级了默认渲染(HTML) -> CanvasKit并且具有更好的性能。

您很可能会收到此错误，因为 CORS（可以检查 chrome 网络选项卡以确保）。

要解决它可以：

1. 更新cors设置服务器端：https://stackoverflow.com/a/66104543/4679965 https://stackoverflow.com/a/66104543/4679965

2. 使用旧渲染运行应用程序：

flutter run -d chrome --web-renderer html // to run the app

flutter build web --web-renderer html --release // to generate a production build

3. 或者用平台视图显示图像：

import 'dart:html';
import 'package:flutter/material.dart';
import 'dart:ui' as ui;

class MyImage extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    String imageUrl = "image_url";
    // https://github.com/flutter/flutter/issues/41563
    // ignore: undefined_prefixed_name
    ui.platformViewRegistry.registerViewFactory(
      imageUrl,
      (int _) => ImageElement()..src = imageUrl,
    );
    return HtmlElementView(
      viewType: imageUrl,
    );
  }
}