Question

======== 图像资源服务捕获的异常========================= 解析图像编解码器时抛出了以下 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),
          ),
        ),
      ],
    );
  }
}

Answer 1

当我尝试从 master 频道运行应用程序时，我遇到了同样的错误，几个星期以来。

我通过强制 Web 渲染器为 HTML 使其工作：

flutter run -d chrome --no-sound-null-safety --web-renderer=html

当您为 Web 构建应用时，您应该：

flutter build web --no-sound-null-safety --web-renderer=html

默认情况下，网络渲染器是自动，在桌面浏览器上选择canvaskit网络渲染器，在移动设备上选择html。

如果您想完全避免这种情况，您可以继续使用 beta 或 dev 渠道。

Answer 2

所以 Flutter web 升级了默认渲染（HTML）-> CanvasKit 并且它有更好的性能。

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

要解决它可以：

更新 cors 设置服务器端：https://stackoverflow.com/a/66104543/4679965
使用旧渲染运行应用程序：

template <typename T>
class ResourceLocator {
public:
    template <typename...Args>
    static void emplace(Args&&...args) {
        instance_.emplace(std::forward<Args>(args)...);
    }
private:
    static std::optional<ResourceLocator<T>> instance_;
};

或在平台视图中显示图像：

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

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

Answer 3

如果它正在处理另一个图像，那么它应该是存储图像的服务器端错误。

Answer 4

可能是编解码器格式的问题。尝试使用另一个图像 url 运行相同的代码。如果它正常工作，那么上述错误可能是技术故障。

你可以试试这个小部件

https://pub.dev/packages/meet_network_image

Answer 5

尽量不要定义容器的高度、宽度，并添加 fit:BoxFit.cover 作为 NetworkImage 的参数

Flutter 无法从 url 加载图像

5 个答案: