CODEWITHSUNDEEP
firebaseflutterfirebase-storageflutter-webflutter-image
Maria PapaG
Maria PapaG

Reputation: 185

Flutter web - Failed to load network image

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

Upvotes: 6

Views: 5582

Answers (2)

MD MEHEDI HASAN
MD MEHEDI HASAN

Reputation: 2490

Use HTML renderer

Run this in your terminal

flutter run -d chrome --web-renderer html

Upvotes: 4

J L
J L

Reputation: 765

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

Upvotes: 1

Related Questions