【Flutter】Flutter web로 이미지를 URL별로 로드할 때 표시되지 않는 대처법

Flutter web로 이미지를 URL 마다 로드하려고 했을 때에 x와 같은 표시가 되어 버렸습니다.
그 해소법을 기술합니다.



Flutter 내에서 아래와 같이 URL별 image 파일을 로드합니다.

child: Image.asset('https://sample.com/images/sample.jpg'),

그러면 아래와 같은 오류가 표시됩니다.

Another exception was thrown: ImageCodecException: Failed to load network image.

원인은 여기에 썼습니다.

기본 レンダラー가 HTML에서 canvaskit로 전환된 것 같습니다.

The CanvasKit renderer implements Flutter’s image API fully. However, it requires access to image pixels to do so, and is therefore subject to the CORS policy.

해결 방법

mobile에서 볼 때는 그대로 갈 수 있지만 web로 볼 때는 canvaskit 대신 html 렌더러를 사용해주세요라는 것 같습니다.

아래 명령으로 실행해보십시오.

flutter run -d chrome --web-renderer html

이제 x였던 이미지가 잘 표시되었다고 생각합니다.
Flutter Web일 때는 주의하십시오.