Flutter: Failed to load network image

Flutter 에서 코딩한 프로그램을 실행시 실행 장치가 Web(크롬)일 경우, 

 

실행된 앱에서 이미지(네트워크를 통해 불러오는)가 로딩되지 않았다. 그리고 엑스박스 안에 "Failed to load network image" 라는 메세지가 있다. 

 

이상하다. 네트워크에 있는 이미지가 문제가 있나? 싶어서 URL을 가져다가 크롬 브라우저 주소창에 붙여넣고 엔터를 치니 사진이 잘 뜬다. 

 

문제를 해결하게 구글링을 했다. StackOverFlow에 있는 설명과 해결책.

 

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://flutter.dev/docs/development/tools/web-renderers

 

즉, Flutter는 web에서 사용하는 두 종류의 Renderer가 있는데, 하나는 html, 다른 하나는 canvaskit 이다. Flutter web에서 실행을 하면 이때 사용하고 있는 device(플랫폼 장치)에 따라 선택하는 Renderer가 다른데, 실행한 앱이 모바일 브라우저일 경우 html renderer를 사용하고, 데스크탑 브라우저일 경우 canvas renderer를 선택한다. 

 

html renderer 교차 출처 이미지를 별다른 설정없이 로딩 할 수 있지만 CanvasKit renderer는 그렇지 않은가 보다. 

따라서 데스크탑의 웹 브라우저로 앱을 실행할 때, CanvasKit renderer를 사용하지 않고 대신 html renderer를 사용하도록 하기위해 실행 명령에 --web-renderer html 을 추가해야 한다.

 

실행할 때마다 입력하기 귀찮으니, 나는 json파일로 만들어서 추가해 두었다.  (코드를 추가한 위치는 프로젝트의 루트 디렉토리에서 /.vscode/launch.json 에 넣었다)

{
    "version": "0.2.0",
    "configurations": [
        {
            "name":"Flutter",
            "request": "launch",
            "type": "dart",
            "args":[
                "--web-renderer",
                "html",
                "--web-hostname", 
                "127.0.0.1",
            ]
        }
    ]
}