Flutter web - Failed to load network image

Question

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.

same problem for me as well. Please suggest me if you have some solution for this. — Raghu Mudem
– Raghu Mudem, Commented Aug 3, 2021 at 13:32

MD MEHEDI HASAN · Accepted Answer · 2021-08-16 11:52:43Z

4

Use HTML renderer

Run this in your terminal

flutter run -d chrome --web-renderer html

answered Aug 16, 2021 at 11:52

MD MEHEDI HASAN

2,5002 gold badges24 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Nagaraj Over a year ago

it will not work after upload to your server .. this commant work only for testing purpose

J L · Accepted Answer · 2021-04-21 21:46:33Z

1

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

answered Apr 21, 2021 at 21:46

J L

7951 gold badge7 silver badges19 bronze badges

4 Comments

Adnan haider Over a year ago

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 Over a year ago

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 Over a year ago

i use stable version of flutter web is it not perfect?

J L Over a year ago

this instruction will help you ... medium.com/flutter-community/…

Collectives™ on Stack Overflow

Flutter web - Failed to load network image

2 Answers 2

Use HTML renderer

Run this in your terminal

1 Comment

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Use HTML renderer

Run this in your terminal

1 Comment

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related