Flutter web can't load network image from another domain

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

1. Open the GCP console, select your project and start a cloud terminal session by clicking the >_ icon button in the top navbar.

2. Click the open editor button (pencil icon), then create the cors.json file.

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 access.

3. Run gsutil cors set cors.json gs://your-bucket

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

Taken from the docs

CORS is a mechanism that browsers use to control how one site accesses the resources of another site. It is designed such that, by default, one web-site is not allowed to make HTTP requests to another site using XHR or fetch. This prevents scripts on another site from acting on behalf of the user and from gaining access to another site’s resources without permission

When using <img>, <picture>, or <canvas>, the browser automatically blocks access to pixels when it knows that an image is coming from another site and the CORS policy disallows access to data.

Flutter has two renderers for web, canvaskit and htmlWhen you run/build app on the flutter web it uses renderers based on the device where its running.

HTML renderer: when the app is running in a mobile browser.

CanvasKit renderer: when the app is running in a desktop browser.

auto (default) - automatically chooses which renderer to use.

The HTML renderer can load cross-origin images without extra configuration.so you could use these commands to run and build the app.

flutter run -d chrome --web-renderer html // to run the appflutter build web --web-renderer html --release // to generate a production build

source: https://flutter.dev/docs/development/tools/web-renderers

for me flutter run -d chrome --web-renderer html worked.