加载网络图片失败

Question

我正在创建一个 flutter web 应用程序，我的应用程序不会专门显示来自 FirebaseStorage 的图像。我从 firebasestorage 获得了正确的下载 URL，但 NetworkImage 和 Image.network 不会显示图像，但可以显示其他图像链接。

Answer 1

有多种方法可以解决此问题：

为 CORS 配置您的数据，摘自此 SO 帖子：

1. 打开 GCP 控制台，选择您的项目并通过单击

   >_

   启动云终端会话 顶部导航栏中的图标按钮。

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

   cors.json

   文件。

   cors.json

   文件应如下所示：

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

我将原点设置为

*

，这意味着每个网站都可以显示您的图像。但你也可以 在那里插入您网站的域名以限制访问。

3. 运行 gsutil cors set

   cors.json gs://your-bucket

其他选项是使用 html 渲染器：

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

或

flutter run --web-renderer html

最后是使用包image_network而不是flutter的NetworkImage。

它允许您使用 CanvasKit 在网络上渲染图像，而无需 遇到 CORS 问题。