Flutter web - Failed to load network image

1,571

Solution 1

Use HTML renderer

Run this in your terminal

flutter run -d chrome --web-renderer html

Solution 2

The image appeared after running the following.

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

though, I still have issue to upload/crop image from flutter web to firebase

Share:
1,571
Maria PapaG
Author by

Maria PapaG

Updated on December 28, 2022

Comments

  • Maria PapaG
    Maria PapaG 10 months

    I have images in my project's firebase storage bucket that I would like to display in the UI. I followed the instructions from another stack overflow answer, but it didn't work for me.

    For being able to display your images from Firebase Storage on a Flutter web page you have to configure your data for CORS.

    Open the GCP console, select your project and start a cloud terminal session by clicking the >_ icon button in the top navbar. Click the open editor button (pencil icon), then create the cors.json file. Run gsutil cors set cors.json gs://your-bucket The cors.json file should look like this:

    [ { "origin": ["*"], "method": ["GET"], "maxAgeSeconds": 3600 } ] I set the origin to * which means that every website can display your images. But you can also insert the domain of your website there to restrict the access.

    If you need more information: https://cloud.google.com/storage/docs/configuring-cors

    I see on cloud platform my project and the update to the bucket but I get the same error message:

    Failed to load network image.
    Image URL: gs://---------------------------------.png
    Trying to load an image from another domain? Find answers at:
    https://flutter.dev/docs/development/platform-integration/web-image
    

    I also followed this guy's tutorial on how to access your storage images. He used the Image.network widget, which is what I'm doing as well. It just does not work for me. The screenshot below is what I see. The black boxes are the URLs from storage location.

    enter image description here

  • Adnan haider
    Adnan haider over 2 years
    it means when you add image you must first run this tag then add image otherwise not work, is there any proper solution permanently ?
  • J L
    J L over 2 years
    you need to build the app with the image. then you run flutter web, when you build the app, use command line - flutter build web --release --web-renderer html
  • Adnan haider
    Adnan haider over 2 years
    i use stable version of flutter web is it not perfect?
  • J L
    J L over 2 years
    this instruction will help you ... medium.com/flutter-community/…