EXCEPTION CAUGHT BY IMAGE RESOURCE SERVICE [object ProgressEvent]

Question

I want to build app using flutter, but I have problem, I have tried to get images from firebase storage, but when I run the app there are no images appeared.

this is the code.

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(),
                  ),
                );
             }

          ),

       ]
     ),
    );
  }
}

this is error has appeared , this is the massage error:

══╡ 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]

How can I solve this error?

Answer 1

faced the same problem with flutter web, working fine on android.
editing index.html was the only permanent solution that worked for me, just add this :

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

Answer 2

I got the same error while I ran this code on flutter web (chrome).

These solutions worked for me:

Solution 1:

1. Go to Terminal
2. Run the command: flutter run -d chrome --web-renderer html

Solution 2:

CORS Configuration