使用 canvaskit 进行 Flutter Web 构建：无法加载 Image.network()

I can't use the image URL from my domain but I can use the image URL from another domain like Facebook. The error is:

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

修复的基本方法是使用 HTML 呈现（flutter run -d chrome --web-renderer html）但我需要使用 toImage() 函数，并且使用 HTML 渲染不支持此函数。所以我用 Canvaskit 进行渲染。

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

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

使用 HTML 渲染案例：如果有一个函数可以用来代替 toImage() 函数，请告诉我。

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

谢谢。

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

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

1. Use https://cors-anywhere.herokuapp.com/或创建您的代理。

• click https://cors-anywhere.herokuapp.com/ https://cors-anywhere.herokuapp.com/并激活它。

• 您的图像小部件如下所示：

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

2. 使用 HtmlElementView(viewType: '$imageUrl')。

• 将其添加到底部的analysis_options.yaml中。

analyzer:
  errors:
    undefined_prefixed_name: ignore

• 将它们导入到您的 dart 文件中。

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

• 将其添加到initState() or 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)

3. 使用.htaccess

• 通过 open 激活 .htaccess/etc/apache2/apache2.conf in <Directory /var/www/>标记、更改AllowOverride None to AllowOverride All.
• 您必须通过在控制台中输入这些内容来启用 mod_headers。 启用 mod_headersa2enmod headers然后 重新启动阿帕奇sudo service apache2 restart.
• 在根目录中创建 .htaccess（对我来说，在 HTML 文件夹中）
• 通过将其添加到 .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 https://github.com/Rob--W/cors-anywhere/issues/301）并且比其他方法慢，因为应用程序必须与此链接连接，并且该链接将获取您的图像 URL，然后将其发送回您的应用程序。如果我创建的网络看起来像这样，它会因为太多用户使用它而崩溃，对吧？
• 方法 2 适用于其他域上的图像。但缺点是图像的宽度和高度很难确定。需要检查哪条边长最长才能设置此值..style. *longest * is '100%'短边是'auto'.
• 方法 3 适合在其域中使用图像的人。

如果有一个包可以完成方法 2 之类的事情那就太好了。

您可以尝试使用您的 imageUrl：https://flutter-test-exam-bug.web.app/#/stackoverflow 72306043 https://flutter-test-exam-bug.web.app/#/stackoverflow_72306043

用于测试本地端对于 Flutter web (Canvaskit)，请遵循this https://stackoverflow.com/a/66879350/17798537