Flutter Web使用Canvaskit构建：无法加载Image.network()。

Question

我不能使用来自我的域的图像URL，但我可以使用来自其他域（如Facebook）的图像URL。错误是： 在将 StackOverflow 的图像 URL 放入 Image.network() 时也会出现这种情况。例如，尝试使用上面的图片（Image.network('https://istack.dev59.com/o6lwE.webp')）。

修复的基本方法是使用 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 渲染后遇到了很多问题。

HTML 渲染情况下：如果有一个可以替代 toImage() 函数的函数，请告诉我。

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

谢谢。

- Sittiphan Sittisak

Answer 1

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

两天后，我找到了以下内容：

1. 使用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()或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

• 通过打开 /etc/apache2/apache2.conf 文件中的 <Directory /var/www/> 标签，将 AllowOverride None 改为 AllowOverride All，激活 .htacess。
• 你需要在控制台输入以下命令来启用 mod_headers： 使用 a2enmod headers 启用 mod_headers， 然后使用 sudo service apache2 restart 重新启动 Apache。
• 在根目录下创建你的 .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），而且比其他方法慢，因为应用程序必须与此链接连接，并且该链接将获取您的图像URL，然后将其发送回您的应用程序。如果我创建的网站出现这种情况，会崩溃，因为太多用户在使用它，对吗？
• 方法2适用于位于其他域上的图像。但缺点是很难确定图像的宽度和高度。需要检查哪一边的长度最长，然后设置..style. *longest *为'100%'，较短的一边为'auto'。
• 方法3适用于在其域上使用图像的人。

如果有一个可以完成类似方法2的功能的软件包，那将非常好。

你可以在以下网址尝试你的图片链接： https://flutter-test-exam-bug.web.app/#/stackoverflow_72306043 为了在本地测试Flutter Web（Canvaskit），请按照this。

- Sittiphan Sittisak

Answer 2

我正在使用Canvaskit渲染网页。当尝试通过URL显示一张图片时：

Image.network(banner.imageUrl)

我遇到了一个错误：又抛出了一个异常：[object ProgressEvent]

我通过从pub.dev下载的包image_network解决了这个问题。

我的解决方案：

import 'package:flutter/material.dart';
import 'package:image_network/image_network.dart';

/// Supports canvaskit rendering for web.
class AppNetworkImage extends StatelessWidget {
  final String imageUrl;

  const AppNetworkImage({
    super.key,
    required this.imageUrl,
  });

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (BuildContext context, BoxConstraints constraints) {
        return ImageNetwork(
          image: imageUrl,
          height: constraints.maxHeight,
          width: constraints.maxWidth,
          duration: 100,
          onPointer: true,
          onLoading: const SizedBox(),
        );
      },
    );
  }
}

- Yauheni Prakapenka