[Flutter] Web Image Cors 문제

 

 

 

 

 

이런 식으로 web으로 빌드해서 실행해 보면 네트워크 이미지가 안 보이는 문제가 발생하는 경우가 있습니다. 이는 Cors문제로 브라우저에서 그리지 않는 문제입니다. 이를 강제로 해결하기 위한 방법으론 Flutter Web은 기본적으로 두 가지 렌더링 엔진을 사용합니다: CanvasKit과 HTML 렌더러입니다. Flutter Web의 기본 렌더러는 CanvasKit입니다. CanvasKit은 WebAssembly 기반의 렌더러로, 더 나은 성능과 그래픽 효과를 제공하지만, 일부 경우 네트워크 리소스를 제대로 처리하지 못해 위와 같은 문제가 발생합니다.

 

 

기본 렌더러 설정을 HTML로 

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

 

해당 코드는 Flutter Web에서 사용하는 렌더러를 CanvasKit에서 HTML로 강제로 변경하는 역할을 합니다.

 

 

index.html 파일 body태그 안에 붙여 넣고 확인해 보시면 이미지가 잘 나오는 것을 확인할 수 있습니다.

 

 

3.27이상 버전에서는 안됩니다.

Flutter 3.27 이상 버전에서부터는 html 랜더링 방식이 deprecate가 되어서 더 이상 지원하지 않는 방법입니다. 해당 코드는 동작하지 않으니 지우셔도 됩니다.