108

I can't load network images in flutter web from other domains with API calls. getting this error

Trying to load an image from another domain? Find answers at: https://flutter.dev/docs/development/platform-integration/web-images ImageCodecException: Failed to load network image.

any help?

4

17 Answers 17

139

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

12
  • 17
    On Step 2, in order to create the cors.json file, click on the 3 dots (...) on the same row as Explorer:XXXX OR just click on File>new file. Step 3: You'll find "your-bucket" in your firebase STORAGE console and YOU WILL HAVE TO AUTHORIZE when you run the shell command.
    – theSpuka
    Commented Feb 21, 2021 at 21:34
  • 9
    To verify: gsutil cors get gs://your-bucket Commented Jul 5, 2021 at 22:31
  • 3
    Still not working after the all above suggestions, Trying to display YouTube thumbnails in my flutter web app. Am I missing something after point 3. Is there any reload or refresh command need to perform. Please suggest me. Commented Aug 3, 2021 at 12:06
  • This looks like configuration only related to firebase and google cloud. Is there any additional configuration involved in flutter app as well? As images are still not loading and throws missing CORS headers error.
    – ka_sh
    Commented Oct 7, 2021 at 6:09
  • 3
    for people like me who don't know anything about buckets and get 403 errors, you get your bucket List with gsutil ls, and check which one is used for your app and set cors.json for that one. Commented Dec 16, 2021 at 6:32
100

There are two ways to resolve this either run your app using HTML renderer or set up the CORS configuration.

1. Using HTML renderer

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 html When 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 app

flutter build web --web-renderer html --release // to generate a production build

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

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

10
  • where in your file tree do you place the cors.json file? (does it matter?) Commented Feb 9, 2022 at 15:07
  • cors.json doesn't really matter once you run the gsutil command. Commented Feb 9, 2022 at 15:13
  • @MaheshJamdade cors.json file is actually required for gsutil to read our cors configuration.Also Cors.json file should be placed in path where you'll run G-Cloud command Commented Jun 1, 2022 at 4:20
  • @InderPalSingh we no longer need the cors.json file once we upload the configuration by running the last command. Commented Jul 8, 2022 at 16:35
  • I too recommend the 2nd solution... but what happens when we cant set this on a domain/server that doesnt give us permission to do so? How do we handle CORS then? Commented Aug 14, 2022 at 7:24
56

I solved this issue by using html renderer:

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

or

flutter run --web-renderer html
3
  • it works for both deployment and debuging Commented Feb 11, 2021 at 6:17
  • not loading for google places API for flutter web Commented Jun 17, 2021 at 14:48
  • 5
    it will make the image and text density so bad...please don't use that type of rendering Commented Jul 7, 2021 at 12:13
37

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

<script type="text/javascript">
    window.flutterWebRenderer = "html";
</script>
3
  • The side effect of this approach is that the web version (at least for me) stopped rendering the Google font in the project :/ (as of Flutter 3.3.5)
    – Dana
    Commented Oct 27, 2022 at 22:34
  • But Lottie Animation not works If I use this Renderer
    – Balaji
    Commented Jan 19, 2023 at 14:45
  • 1
    add this script inside <head> HERE </head> section Commented Feb 21 at 12:52
31

For me this worked:

flutter run -d chrome --web-renderer html
2
  • 2
    The arguments work when deployed. You just need to add the same arguments during build flutter build web --web-renderer html
    – Omatt
    Commented Sep 11, 2021 at 15:46
  • @Omatt stackoverflow.com/questions/76411880/…
    – Rehan
    Commented Jun 6, 2023 at 15:31
29

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.

1
  • To verify: 'gsutil cors get gs://your-bucket' Commented Apr 13, 2022 at 14:47
11

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

Run config

9

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,
    );
  }
}


1
  • 2
    i want to add fit property like image widget, any idea how to add that ? Commented Sep 9, 2021 at 4:37
9

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!

0
4

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

3

Running

flutter run --web-renderer html

solved my issue.

1
  • This command is executed every time a change is copied in Flutter ?, this command works but when re-executing the changes no longer work
    – LΞИIИ
    Commented Jun 22, 2021 at 21:08
3

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:

enter image description here

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:

enter image description here

Now you can run the app as usual.


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


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

1

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 *
1

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.

1

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

4
  • I am trying to parse your first sentence here. What answers are being copied, and what decisions are you finding disgusting?
    – halfer
    Commented Oct 4, 2023 at 22:16
  • How many monotonous answers offer the same thing - --web-renderer html? I counted 10! Several of these 10 offer other solutions that also duplicate each other, but this still seems normal. And I'm saying that using this flag is a bad technical decision, when there is a CanvasKit render (--web-renderer canvaskit). >This renderer is fully consistent with Flutter mobile and desktop, has faster performance with higher widget density, but adds about 1.5MB in download size. CanvasKit uses WebGL to render Skia paint commands.
    – Ruble
    Commented Oct 5, 2023 at 7:04
  • OK. I've softened the edges of the remark (commenting on meta-topics in answers isn't really necessary anyway). I wonder if you could copy some of the technical content of your comment into your answer? - I don't think you mentioned the CanvasKit render in it.
    – halfer
    Commented Oct 5, 2023 at 7:31
  • 1
    Thanks for softening the rough edges of my answer :) I didn't mention the CanvasKit renderer because the solution to this issue should not lie in the areas of the --web-renderer flag. No, it will certainly work, but it's not the best solution. And thanks for the information.
    – Ruble
    Commented Oct 5, 2023 at 8:36
0

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

-1

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");
    })
    
1
  • 1
    Please read How to Answer and edit your answer to contain an explanation as to why this code would actually solve the problem at hand. Always remember that you're not only solving the problem, but are also educating the OP and any future readers of this post.
    – Adriaan
    Commented Feb 22, 2023 at 10:20

Not the answer you're looking for? Browse other questions tagged or ask your own question.