使用 canvaskit 构建 Flutter Web:加载失败 Image.network()

Flutter web build with canvaskit: Failed to load Image.network()

我无法使用我域中的图像 URL,但我可以使用其他域(如 Facebook)中的图像 URL。错误是:

将来自 Whosebug 的图像 URL 放入 Image.network() 时也会发生这种情况。例如,尝试使用上图(Image.network('https://i.stack.imgur.com/o6lwE.png')).

修复的基本方法是用HTML(flutter run -d chrome --web-renderer html)渲染,但我需要使用toImage()函数,用HTML渲染不支持这个函数。所以我用 Canvaskit 渲染。

这个 link(https://docs.flutter.dev/development/platform-integration/web-images#host-your-images-in-a-cors-enabled-cdn) 可以帮助使用 Firebase 但我正在使用 Ubuntu 和 Apache 的人。

其实我想用HTML渲染,因为用Canvaskit渲染后遇到了很多问题

Render with HTML case: 如果有可以代替toImage()函数使用的函数,请告诉我。

使用 Canvaskit 渲染案例:如果您知道如何使用 Image.network() 显示图像 URL,请告诉我。

谢谢。

这个问题被Whosebug的自动系统关闭了,所以我删除它并创建一个新的。

2 天后,这就是我的发现。

  1. 使用 https://cors-anywhere.herokuapp.com/ 或创建您的代理。
  1. 使用 HtmlElementView(viewType: '$imageUrl').
  • 在底部的 analysis_options.yaml 中添加这个。
analyzer:
  errors:
    undefined_prefixed_name: ignore
  • 将这些导入您的 dart 文件。
import 'dart:html';
import 'dart:ui' as ui;
  • initState()Widget build() 中添加这个,这必须在之前使用 - 您的图像小部件如下所示:
ui.platformViewRegistry.registerViewFactory(
      $imageUrl,
      (int viewId) => ImageElement()
        ..style.width = 'auto' //or '0%'-'100%'
        ..style.height = 'auto' //or '0%'-'100%'
        ..src = $imageUrl,
    );
  • 您的图像小部件如下所示:
HtmlElementView(viewType: $imageUrl)
  1. 使用.htaccess
  • 通过在 <Directory /var/www/> 标签中打开 /etc/apache2/apache2.conf 激活 .htacess,将 AllowOverride None 更改为 AllowOverride All
  • 您必须通过在控制台中键入这些来启用 mod_headers。 然后用 a2enmod headers 启用 mod_headers 使用 sudo service apache2 restart.
  • 重新启动 apache
  • 在您的根目录中创建您的 .htaccess(对我来说,在 HTML 文件夹中)
  • 允许 cross-origin 使用图像并 canvas 通过将其添加到 .htaccess 文件中。
<IfModule mod_setenvif.c>
  <IfModule mod_headers.c>
    <FilesMatch "\.(avifs?|bmp|cur|gif|ico|jpe?g|jxl|a?png|svgz?|webp)$">
      SetEnvIf Origin ":" IS_CORS
      Header set Access-Control-Allow-Origin "*" env=IS_CORS
    </FilesMatch>
  </IfModule>
</IfModule>
  • 方法 1 修复起来简单快捷。但暂时可用且有限(https://github.com/Rob--W/cors-anywhere/issues/301)并且比其他方法慢,因为该应用程序必须与此 link 连接并且 link 将获取您的图像 URL 然后发送回到你的应用程序。如果我创建这样的网络,它会因为太多用户使用它而崩溃,对吗?
  • 方法二适用于其他域的图片。但缺点是难以确定图像的宽高。需要检查哪条边的长度最长,设置这个..style. *longest *'100%',短边是'auto'
  • 方法 3 适用于在其域中使用图像的人。

如果有一个包可以完成像方法 2 这样的事情,那就太好了。

您可以在以下位置尝试您的 imageUrl: https://flutter-test-exam-bug.web.app/#/Whosebug_72306043