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

Question

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

这是代码。

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

import '../widgets/action_bar.dart';

class HomeTab extends StatelessWidget {

  final CollectionReference  _productRef = FirebaseFirestore.instance.collection("products");

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Stack(
        children: [
          FutureBuilder<QuerySnapshot>(
            future: _productRef.get(),
            builder: (context , snapshot){
              if(snapshot.hasError){
                return Scaffold(
                  body: Center(
                    child: Text("Error ${snapshot.error}"),
                  ),
                );
              }


              if(snapshot.connectionState == ConnectionState.done){
                return ListView(
                  children: snapshot.data!.docs.map((document) {
                    return Container(
                      child: Image.network(
                        "${(document.data() as Map<String, dynamic>)["image"][0]}",
                      ),
                      //child: Text("name: ${(document.data() as Map<String, dynamic>)["name"]}"),
                    );
                  }).toList(),
                );
              }

                return Scaffold(
                  body: Center(
                    child: CircularProgressIndicator(),
                  ),
                );
             }

          ),

       ]
     ),
    );
  }
}

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

══╡ EXCEPTION CAUGHT BY IMAGE RESOURCE SERVICE ╞════════════════════════════════════════════════════
The following ProgressEvent$ object was thrown resolving an image codec:
  [object ProgressEvent]

When the exception was thrown, this was the stack

Image provider: NetworkImage("gs://second-ecommerce-b5666.appspot.com/IMG-20230520-WA0256.jpg",
  scale: 1)
Image key: NetworkImage("gs://second-ecommerce-b5666.appspot.com/IMG-20230520-WA0256.jpg", scale: 1)
════════════════════════════════════════════════════════════════════════════════════════════════════
Another exception was thrown: [object ProgressEvent]
Another exception was thrown: [object ProgressEvent]

如何解决这个错误？

Answer 1

如果仔细观察，您会发现您尝试加载的 URL 以

gs://

开头。这是 Google Cloud Storage 的内部协议，

NetworkImage

类无法识别。

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

NetworkImage 

.

Answer 2

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

这些解决方案对我有用：

解决方案1：

1. 前往航站楼
2. 运行命令：

   flutter run -d chrome --web-renderer html

解决方案2：

CORS 配置