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. Go to your firebase console and open firebase storage there you find gs://

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

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

[Answer Updated as per latest flutter 3.29.3]

There are two ways to resolve this either use Native HTML elements like <img> or <picture> elements or Setup the CORS configuration.

1. Using Native Widgets

Flutter allows rendering Native HTML elements into flutter widget tree, this is possible using HtmlElementView class

Use the below Image widget for displaying images on the web

class NativeImage extends StatelessWidget {
  final String src;
  final String? alt;
  final String? title;
  final String? width;
  final String? height;
  const NativeImage(
    this.src, {
    super.key,
    this.alt,
    this.title,
    this.width,
    this.height,
  });

  @override
  Widget build(BuildContext context) {
    return HtmlElementView.fromTagName(
      tagName: 'img',
      onElementCreated: (imgElement) {
        imgElement as web.HTMLElement;
        imgElement.setAttribute('src', src);
        if (alt != null) {
          imgElement.setAttribute('alt', alt!);
        }
        if (title != null) {
          imgElement.setAttribute('title', title!);
        }
        if (width != null) {
          imgElement.style.width = width!;
        }
        if (height != null) {
          imgElement.style.height = height!;
        }
      },
    );
  }
}

Usage

NativeImage("<url>",
  width: "100px",
  height: "100px",
),

2. Setup CORS Configuration

• Download the Google-cloud-sdk which contains a tool called gsutil
• In your flutter project create a file called cors.json and add this json content, which will remove all domain restrictions. (It doesn't matter where this file is located)

[
  {
    "origin": ["*"],
    "method": ["GET"],
    "maxAgeSeconds": 3600
  }
]

• Run gcloud init (located in google-cloud-sdk/bin)
• Authenticate yourself by clicking the link and choose the project in the console.
• finally execute gsutil cors set cors.json gs://<your-bucket-name>.appspot.com You can find your bucket name in firebase storage.

I have documented this entire process in github gists

I solved this issue by using html renderer:

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

or

flutter run --web-renderer html

Simply add this in your Flutter (web/index.html):

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

For me this worked:

flutter run -d chrome --web-renderer html

If you use Firebase storage just follow these steps:

1. Open Google Cloud Console at your project.

2. Click on console icon in top right corner.

3. Click Open editor.

4. Click File->New->cors.json.

5. Place code below:

   [
     {
       "origin": ["*"],
       "method": ["GET"],
       "maxAgeSeconds": 3600
     }
   ]
   

6. Then Run in console:

   gsutil cors set cors.json gs://bucket-name
   

   bucket-name is the name of the storage bucket which you can find on your Firebase project above the folders in the storage section.

To debug quickly, instead of flutter run -d chrome --web-renderer html running from the terminal you can also add the arguments --web-renderer html on your run config. On the menu bar, navigate through Run > Edit Configurations

The Ultimate Solution

Use this package instead of flutter's NetworkImage.

https://pub.dev/packages/image_network

Tested on Flutter web with Canvas renderer and it works like a charm!

If you can't update CORS settings or add proxy, prefer CanvasKit (has better performance) over HTML renderer - could display image with platform view:

import 'dart:html';
import 'package:flutter/material.dart';
import 'dart:ui' as ui;

class MyImage extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    String imageUrl = "image_url";
    // https://github.com/flutter/flutter/issues/41563
    // ignore: undefined_prefixed_name
    ui.platformViewRegistry.registerViewFactory(
      imageUrl,
      (int _) => ImageElement()..src = imageUrl,
    );
    return HtmlElementView(
      viewType: imageUrl,
    );
  }
}

This answer includes the two main ones mentioned as well as a vital point that wasn't:

1. LAUNCH CONFIGURATION

Select and open your launch config:

Note the args value:

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Flutter (lib\\main.dart)",
      "type": "dart",
      "request": "launch",
      "program": "lib\\main.dart",
      "flutterMode": "profile",
      "args": ["-d", "chrome", "--web-renderer", "html"]
    }
  ]
}

Make sure you're running the same config:

Now you can run the app as usual.

2. CORS

Install gsutil and create a file cors.json with content:

[
  {
    "origin": ["*"],
    "method": ["GET"],
    "maxAgeSeconds": 3600
  }
]

Run gsutil cors set cors.json gs://[YOUR BUCKET]. If you later want to clear this config from your bucket change the content to [] and run again.

3. ADD TOKEN TO NetworkImage WIDGET

This is what made it work for my rules that required authentication, as I have removed the token param from the image url. Get the user auth token (FirebaseAuth.instance.currentUser.getIdToken()) and add it to the headers arg like so:

NetworkImage(imageUrl, headers: {
  'Authorization': 'Bearer $token',
})  

Not sure what your particular situation is with "another domain" but I hope this is relevant.

This official solution worked for me on Chrome only (Source). But I had to run it first every time.

flutter run -d chrome --web-renderer html

And disabling web security also worked (Source). But the browsers will show a warning banner.

But In case you are running on a different browser than Chrome (e.g. Edge) and you want to keep 'web security' enabled. You can change the default web renderer in settings in VS Code

File ==> Preferences ==> Settings ==> Enter 'Flutter Web' in the Search Bar ==> Set the default web renderer to html

Running

flutter run --web-renderer html

solved my issue.

For someone who uses Slim Framework, just create a .htaccess file on that folder for storing images and put this line of code

Header set Access-Control-Allow-Origin *

I had an issue while loading content from other domains which I don't have control over to change the CORS settings from the server-side. I have found a work-around for this problem:

1. Go to C:\src\flutter\packages\flutter_tools\lib\src\web or navigate from your Flutter root directory to flutter\packages\flutter_tools\lib\src\web.

2. Open chrome.dart in your text editor.

3. Add '--disable-web-security' under the like '--disable-extensions' and save the file.

4. Run flutter clean in your project folder and run the app.

Adding this flag might also cause some security issues.

There are a number of answers here about --web-renderer html, but this is not a good technical decision.

As a solution, the Flutter team also suggests (in addition to customizing cors in various ways):

1. if the app has the bytes of the encoded image in memory
2. provided as an assets
3. stored on the same server that serves the application

The last item may be the most successful if you are configured to use Image.network. This is also quite handy if you are hosting your project on services like Github Pages.

All of these ways also mean that:

The image can be displayed using Image.memory, Image.asset, and Image.network in both HTML and CanvasKit modes.

You can read about all the methods here - Displaying images on the web | Flutter

This issue will occur by CROS policy. and There is two case to handle this:

1. For Debug
2. For Live Web App

For Debugging I suggest just disable the web Security to Pass through CROS. or use flutter_cors package. This package only work for debugging.

For Publishing, I suggest use Proxy server to handle the CORS issue.It is a best way to Bypass CORS. Or You can try some other methods -Link Here

There are two ways to solve this issue:

1. Just run your flutter web with

   flutter run -d chrome --web-renderer html
   

   But there is one problem when you render your canvas view to HTML view. All your views like images, text, etc. will come out blurry (bad quality). If you can sacrifice the quality, go on with the first solution.

2. If you don't want to sacrifice quality, you need to add some code to your backend site. I have done with NodeJS, you can use with yours:

   var express = require("express")
   var app = express()
   
   var subsriberRecord = require("./controller/Subscribe")
   var blogRecord = require("./controller/BlogContent")
   
   app.use(function(req, res, next) {
       res.header("Access-Control-Allow-Origin", "*");
       res.header("Access-Control-Allow-Headers",
        "Origin, X-Requested-With, Content-Type, Accept"
        );
       next();
     });
   
   app.use("/record/", subsriberRecord);
   app.use("/record/", blogRecord);
   app.use('/uploads', express.static('./uploads'));
   
   app.listen(5000, () => {
       console.log("Server running at port 5000");
   })