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

Question

我无法使用我域中的图像 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，请告诉我。

谢谢。

Answer 1

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

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

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

单击 https://cors-anywhere.herokuapp.com/ 并激活它。
您的图像小部件如下所示：

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

使用 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)

使用.htaccess

通过在 <Directory /var/www/> 标签中打开 /etc/apache2/apache2.conf 激活 .htacess，将 AllowOverride None 更改为 AllowOverride All。
您必须通过在控制台中键入这些来启用 mod_headers。然后用 a2enmod headers 启用 mod_headers 使用 sudo service apache2 restart.
在您的根目录中创建您的 .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

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

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

flutter-web

flutter-image

flutter-canvas