Flutter无法从url加载图像
????????? 图像资源服务捕获异常 ?????????????????????????????? 解析图像编解码器时抛出以下 ImageCodecException：无法加载网络图像。图片网址：https : //cdn.sportmonks.com/images/soccer/leagues/5.png
试图从另一个域加载图片？在以下位置找到答案：https :
//flutter.dev/docs/development/platform-integration/web-images
当我尝试演示 URL 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),
),
),
],
);
}
}
回答
几个星期以来，当我尝试从主频道运行应用程序时，我遇到了同样的错误。
我通过强制 Web 渲染器为 HTML 使其工作：
flutter run -d chrome --no-sound-null-safety --web-renderer=html
当您为 Web 构建应用程序时，您应该：
flutter build web --no-sound-null-safety --web-renderer=html
默认情况下 web 渲染器是auto，在桌面浏览器上选择canvaskit web 渲染器，在移动设备上选择html。
如果您想完全避免这种情况，您可以继续使用beta或dev频道。
回答
因此，flutter web 升级了默认渲染（HTML）-> CanvasKit 并且它具有更好的性能。
您很可能会收到此错误，因为 CORS（可以检查 chrome 网络选项卡以确保）。
要解决它可以：
-
更新 cors 设置服务器端：https ://stackoverflow.com/a/66104543/4679965
-
使用旧渲染运行应用程序：
flutter run -d chrome --web-renderer html // to run the app
flutter build web --web-renderer html --release // to generate a production build
- 或者使用平台视图显示图像：
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,
);
}
}