图像资源服务捕获异常 [object ProgressEvent]

Question

我想使用 flutter 构建应用程序，但是我遇到了问题，我尝试从 firebase 存储中获取图像，但是当我运行应用程序时没有出现图像。

\n

这是代码。

\n

import 'package:cloud_firestore/cloud_firestore.dart';\nimport 'package:flutter/material.dart';\n\nimport '../widgets/action_bar.dart';\n\nclass HomeTab extends StatelessWidget {\n\n  final CollectionReference  _productRef = FirebaseFirestore.instance.collection("products");\n\n  @override\n  Widget build(BuildContext context) {\n    return Container(\n      child: Stack(\n        children: [\n          FutureBuilder<QuerySnapshot>(\n            future: _productRef.get(),\n            builder: (context , snapshot){\n              if(snapshot.hasError){\n                return Scaffold(\n                  body: Center(\n                    child: Text("Error ${snapshot.error}"),\n                  ),\n                );\n              }\n\n\n              if(snapshot.connectionState == ConnectionState.done){\n                return ListView(\n                  children: snapshot.data!.docs.map((document) {\n                    return Container(\n                      child: Image.network(\n                        "${(document.data() as Map<String, dynamic>)["image"][0]}",\n                      ),\n                      //child: Text("name: ${(document.data() as Map<String, dynamic>)["name"]}"),\n                    );\n                  }).toList(),\n                );\n              }\n\n                return Scaffold(\n                  body: Center(\n                    child: CircularProgressIndicator(),\n                  ),\n                );\n             }\n\n          ),\n\n       ]\n     ),\n    );\n  }\n}\n

\n

这是出现错误，\n这是按摩错误：

\n

\xe2\x95\x90\xe2\x95\x90\xe2\x95\xa1 EXCEPTION CAUGHT BY IMAGE RESOURCE SERVICE \xe2\x95\x9e\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\nThe following ProgressEvent$ object was thrown resolving an image codec:\n  [object ProgressEvent]\n\nWhen the exception was thrown, this was the stack\n\nImage provider: NetworkImage("gs://second-ecommerce-b5666.appspot.com/IMG-20230520-WA0256.jpg",\n  scale: 1)\nImage key: NetworkImage("gs://second-ecommerce-b5666.appspot.com/IMG-20230520-WA0256.jpg", scale: 1)\n\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\nAnother exception was thrown: [object ProgressEvent]\nAnother exception was thrown: [object ProgressEvent]\n

\n

我该如何解决这个错误？

\n

Answer 1

flutter web 遇到了同样的问题，在 android 上运行良好。
编辑index.html是唯一对我有用的永久解决方案，只需添加以下内容：

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

Answer 2

当我在flutter web (chrome)上运行这段代码时，我遇到了同样的错误。

这些解决方案对我有用：

解决方案一：

1. 前往航站楼
2. 运行命令：flutter run -d chrome --web-renderer html

解决方案2：

CORS配置

Answer 3

如果您仔细观察，您会发现您尝试加载的 URL 以gs://. 这是 Google Cloud Storage 的内部协议，该类不NetworkImage认可该协议。

您可以通过 SDK 从该 URL 下载数据，如有关下载到本地文件或作为 data 的文档中所示，也可以请求该路径的下载 URLNetworkImage并将其传递到您的.