CODEWITHSUNDEEP
flutterdart
Mahmoud Al-Haroon
Mahmoud Al-Haroon

Reputation: 2449

Failed to load network image in flutter web

I am trying to retrieve a network image from firebase and I found the below error:

Failed to load network image.
Image URL: https://firebasestorage.googleapis.com/v0/b/my-portfolio-e615c.appspot.com/o/user%2FIMG_7344.jpg?alt=media&token=e7681a94-89f3-4a85-b8f8-83f346e91bd8
Trying to load an image from another domain? Find answers at:
https://flutter.dev/docs/development/platform-integration/web-images

So I searched about the solution I found I can use one of the below commands and it works fine:

flutter run --web-renderer html

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

So is there's another solution to run on debug mode without showing this error?

Upvotes: 2

Views: 3039

Answers (2)

Romavic dos Anjos
Romavic dos Anjos

Reputation: 11

Put this in your index.html and the images will start appearing!

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

Upvotes: 1

Bram
Bram

Reputation: 680

I believe the issue is related to Cross Origin Resource Sharing, and in Flutter there is a good explanation here. It gives specific examples for how to configure Firebase cross origin requests by modifying your firebase.json file.

Upvotes: 2

Related Questions