EXCEPTION CAUGHT BY IMAGE RESOURCE SERVICE [object ProgressEvent]
Asked Answered
D

9

19

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?

Discretionary answered 24/6, 2023 at 19:11 Comment(1)
Please trim your code to make it easier to find your problem. Follow these guidelines to create a minimal reproducible example.Segal
N
31

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>
Nutria answered 24/10, 2023 at 15:45 Comment(2)
not working yetLecia
This solution is working fine for me, Thanks :)Krisha
U
12

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

Useless answered 22/9, 2023 at 7:28 Comment(1)
Solution 1 worked for me, could you explain what the command does differently to using 'run and debug' through vscode?Burgos
P
6

Solutions same as @Cynthia Konar

run command flutter run -d chrome --web-renderer html or

you can go to index.html file on web folder, then change

onEntrypointLoaded: function(engineInitializer) {
  engineInitializer.initializeEngine().then(function(appRunner) {
    appRunner.runApp();
  });
}

to

onEntrypointLoaded: function(engineInitializer) {
  let config = { renderer: 'html' };
  engineInitializer.initializeEngine(config).then(function(appRunner) {
    appRunner.runApp();
  });
}

Based on https://docs.flutter.dev/platform-integration/web/renderers

"auto (default) - automatically chooses which renderer to use. This option chooses the HTML renderer when the app is running in a mobile browser, and CanvasKit renderer when the app is running in a desktop browser."

Pelpel answered 8/1 at 22:26 Comment(0)
L
1

If you look carefully, you'll see that the URL you're trying to load starts with gs://. That's Google Cloud Storage's internal protocol, and not something the NetworkImage class recognizes.

You can either download the data from that URL through the SDK, as shown in the documentation on downloading to a local file or as data, or you can request a download URL for the path and pass that to your NetworkImage.

Lebanon answered 25/6, 2023 at 6:48 Comment(2)
Be aware however that other problems may be involved since this also happens to images from common URL's. There are situations where this same error happens just for web, for those common cases.Jasisa
I did use request a download URL and still faced the same issue! You need to implement the CORS or use html renderer.Rancher
B
1

But even when replacing the gs:// with the correct https:// URL, I still need to use the HTML renderer as described above. With the CanvasKit renderer it does not work.

Seems that the the request header 'Sec-Fetch-Mode' is set to 'no-cors' when using the html renderer and 'Sec-Fetch-Mode' is set to 'cors' when using canvaskit.

So with the canvaskit a CORS problem occuers. You can read about it here: https://docs.flutter.dev/platform-integration/web/web-images

The interesting part:

Cross-origin images

The HTML renderer can load cross-origin images without extra configuration. CanvasKit requires that the app gets the bytes of the encoded image. There are several ways to do this, discussed below.

Here is the docu how to change the renderer for flutter web: https://docs.flutter.dev/platform-integration/web/renderers?gclid=CjwKCAiA6byqBhAWEiwAnGCA4NfZPV4prm9HNSgyaNJRzRgUVLaGJIpkqFihgFp0bcVYmZUniMHZFRoCFa4QAvD_BwE&gclsrc=aw.ds

Boozer answered 11/11, 2023 at 15:54 Comment(0)
U
1

It is more of a security feature. As the Flutter doc suggests, there are certain limitations in what you can do with images on web compared to mobile and desktop platforms. When using CanvasKit to render the web view, it cannot access the image data from arbitrary sources because of the CORS policies.

The explanation and workarounds can be found here

As suggested in the previous answers, you can flutter run -d chrome --web-renderer html to use HTML instead of CanvasKit to render.

Unshaped answered 7/2 at 10:26 Comment(0)
S
0

2024/06/15 Update I just faced this issue when trying to load network image in flutter web. So i find this package that solve my problem: image_network

just add this widget with your url on it and it will work on your flutter web app

ImageNetwork(
  image: "${(document.data() as Map<String, dynamic>)["image"][0]}",
  // put a height and width because they are required
  height: 150,
  width: 150,
  curve: Curves.easeIn,
  fitWeb: BoxFitWeb.cover,
  onLoading: const CircularProgressIndicator(
     color: Colors.indigoAccent,
  ),
  onError: const Icon(
     Icons.error,
         color: Colors.red,
     ),
  )
Scrounge answered 17/6 at 19:27 Comment(1)
Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.Leavitt
E
0

For me it was a problem of missing CORS configuration on the Digital Ocean Spaces bucket side. Since I control it I made the change for * domain with get request type and purge the CDN cache. After that the error was gone

Equiponderate answered 25/6 at 22:11 Comment(0)
K
0
<script type="text/javascript">
    window.flutterWebRenderer = "html";
</script>

Go to the web/index.html file and the above script inside the body tag. My flutter version: 3.22+

https://docs.flutter.dev/platform-integration/web/renderers

Krisha answered 7/8 at 5:43 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.