Flutter web 无法从另一个域加载网络图像

Question

我无法通过 API 调用从其他域加载 flutter web 中的网络图像。收到这个错误

试图从另一个域加载图像？在以下位置找到答案： https: //flutter.dev/docs/development/platform-integration/web-images ImageCodecException：无法加载网络图像。

有什么帮助吗？

Answer 1

为了能够在 Flutter 网页上显示来自任何其他域或 Firebase 存储的图像，您必须为CORS配置数据。

1. 打开GCP 控制台，选择您的项目并通过单击>_顶部导航栏中的图标按钮启动云终端会话。

2. 单击打开编辑器按钮（铅笔图标），然后创建cors.json文件。

该cors.json文件应如下所示：

[
  {
    "origin": ["*"],
    "method": ["GET"],
    "maxAgeSeconds": 3600
  }
]

我将原点设置为*这意味着每个网站都可以显示您的图像。但是您也可以在那里插入您网站的域来限制访问。

3. 跑 gsutil cors set cors.json gs://your-bucket

如果您需要更多信息：https : //cloud.google.com/storage/docs/configuring-cors

Answer 2

只需将其添加到您的 Flutter ( web/index.html) 中：

<script type="text/javascript">
    window.flutterWebRenderer = "html";
</script>

Answer 3

取自文档

CORS 是浏览器用来控制一个站点如何访问另一个站点资源的机制。它被设计为默认情况下不允许一个网站使用 XHR 或 fetch 向另一个网站发出 HTTP 请求。这可以防止另一个站点上的脚本代表用户执行操作并防止未经许可访问另一个站点的资源

使用 <img>、<picture> 或 <canvas> 时，当浏览器知道图像来自另一个站点并且 CORS 策略不允许访问数据时，它会自动阻止对像素的访问。

Flutter 有两个 Web 渲染器，canvaskit 和 html。当您在 Flutter Web 上运行/构建应用程序时，它使用基于运行设备的渲染器。

HTML 渲染器：当应用程序在移动浏览器中运行时。

CanvasKit 渲染器：当应用程序在桌面浏览器中运行时。

HTML 渲染器无需额外配置即可加载跨源图像。所以你可以使用这些命令来运行和构建应用程序。

flutter run -d chrome --web-renderer html // to run the app

flutter build web --web-renderer html --release // to generate a production build

来源：https : //flutter.dev/docs/development/tools/web-renderers

Answer 4

如果您使用 Firebase 存储，只需按照以下步骤操作：

1. 在您的项目中打开Google Cloud Console 。

2. 单击右上角的控制台图标。

3. 单击打开编辑器。

4. 单击文件->新建->cors.json。

5. 将代码放在下面：

   [
     {
       "origin": ["*"],
       "method": ["GET"],
       "maxAgeSeconds": 3600
     }
   ]
   

6. 然后在控制台中运行：

   gsutil cors set cors.json gs://bucket-name
   

   bucket-name是存储桶的名称，您可以在 Firebase 项目的存储部分文件夹上方找到该存储桶。

Answer 5

为我flutter run -d chrome --web-renderer html工作。

Answer 6

我通过使用 html 渲染器解决了这个问题

flutter build web --release --web-renderer html

或者

flutter run --web-renderer html

Answer 7

为了快速调试，flutter run -d chrome --web-renderer html您还可以在运行配置中添加参数，而不是从终端运行--web-renderer html。在菜单栏上，浏览Run > Edit Configurations

Answer 8

如果您无法更新 CORS 设置或添加代理，请选择 CanvasKit（具有更好的性能）而不是 HTML 渲染器 - 可以使用平台视图显示图像：

import 'dart:html';
import 'package:flutter/material.dart';
import 'dart:ui' as ui;

class MyImage extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    String imageUrl = "image_url";
    // https://github.com/flutter/flutter/issues/41563
    // ignore: undefined_prefixed_name
    ui.platformViewRegistry.registerViewFactory(
      imageUrl,
      (int _) => ImageElement()..src = imageUrl,
    );
    return HtmlElementView(
      viewType: imageUrl,
    );
  }
}

Answer 9

终极解决方案

使用这个包代替flutter的Ne​​tworkImage。

https://pub.dev/packages/image_network

使用 Canvas 渲染器在 Flutter Web 上进行测试，效果非常好！