Flutter Web Canvaskit 渲染器无法显示网络图片

Question

我在Flutter应用程序中有一个Images.network("$imgUrl")列表。

它在手机上运行良好（包括Android和iOS手机浏览器），但在桌面浏览器上无法正常工作。

然而，当我使用flutter build web --web-renderer html时，图像会显示出来。

在我的情况下，默认渲染器是canvaskit渲染器，难道它不应该也能够工作吗？

我正在使用Flutter 2.0.1稳定通道。

- Mahmood Bkh

---

有人对这个愚蠢的错误有任何更新吗？为此我花了无数小时修复我的自身影像在资源/服务器等等中。 - devDeejay

Answer 1

我需要使用Canvaskit。我正在寻找一些可以解决它的方法。

现在，我找到了两种方法。

1.

Image.network('https://cors-anywhere.herokuapp.com/' + imageUrl)

import 'dart:html';
import 'dart:ui' as UI;

String imageUrl = ".png";
  
  @override
  void initState() {
    ui.platformViewRegistry.registerViewFactory(
      imageUrl,
          (int viewId) => ImageElement()..src = imageUrl,
    );
    super.initState();
  }

  Widget showImg() {
    return SizedBox(
            width: 250,
            height: 250,
            child: HtmlElementView(viewType: imageUrl),
          );
  }

并在analysis_option.yaml文件中添加以下内容：

analyzer:
  errors:
    undefined_prefixed_name: ignore

我认为，在Flutter中有一些关于设置的方法，但我不理解并且没有看到任何关于此的视频。

如果有人知道，请给出答案。

- Sittiphan Sittisak

Answer 2

如果你仍在寻找解决方法，将CanvasKit更改为Html并在运行或构建项目时使用可能是一个潜在的解决方案。

flutter run -d chrome --web-renderer html
flutter build web --web-renderer canvaskit

请阅读 ->

https://flutter.dev/docs/development/tools/web-renderers

- Archangel

---

是的，从技术上讲这是一个变通方法，但对于我正在使用画布工具包的动画密集型应用来说，并不真正适用作为一种变通方法。但对于熟悉HTML渲染器的开发人员来说，应该可以使用。 - devDeejay