flutter-web - 使用 canvaskit : Failed to load Image. 网络构建 Flutter Web()

Question

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

当将来自 StackOverflow 的图像 URL 放入 Image.network() 时也会发生这种情况。例如，尝试使用上面的图片(Image.network('/image/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)可以帮助正在使用 Firebase 但我正在使用 Ubuntu 和 Apache 的人。

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

Render with HTML case: 如果有一个函数可以用来代替 toImage() 函数，请告诉我。

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

谢谢。

Answer 1

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

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

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

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

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

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

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

• 通过打开激活 .htacess /etc/apache2/apache2.conf在 <Directory /var/www/>标记，更改 AllowOverride None至 AllowOverride All .
• 您必须通过在控制台中键入这些来启用 mod_headers。使用 a2enmod headers 启用 mod_headers然后使用 sudo service apache2 restart 重新启动 apache .
• 在您的根目录中创建您的 .htaccess(对我来说，在 HTML 文件夹中)
• 通过将其添加到 .htaccess 文件中，允许跨源使用图像和 Canvas 。

<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 ) 并且比其他方法慢，因为该应用程序必须连接此链接，并且该链接将获取您的图像 URL，然后将其发送回您的应用程序。如果我创建的网络看起来像这样，它会崩溃，因为有太多用户使用它，对吧？
• 方法 2 适用于其他域中的图像。但缺点是难以确定图像的宽高。有必要检查哪条边的长度最长来设置这个 ..style. *longest *是'100%'短边是'auto' .
• 方法 3 适用于在其域中使用图像的人。

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

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