Flutter Web Canvaskit渲染器下网络图片桌面端无法正常显示

这个问题本质上不是 Canvaskit 不支持网络图片加载，而是HTML渲染器和Canvaskit的网络图片加载路径从根上就不一样，加上Flutter 2.0.1这个早期版本的实现差异、桌面端浏览器的安全策略更严格，共同触发了加载失败的问题：

• HTML渲染器的图片加载逻辑非常直接：直接在DOM树里挂载原生<img>标签，完全走浏览器原生的资源加载流程。这种模式下只要浏览器能把图片当DOM资源展示出来，就能正常显示——哪怕图片没有配置跨域响应头，只要你不把图片画到Canvas上读取像素，浏览器就不会强制拦截加载请求。
• Canvaskit的图片加载逻辑完全不同：它不依赖DOM的<img>标签做加载，而是通过Dart侧的HTTP客户端拉取完整的图片二进制流，在Dart侧解码成纹理后上传到GPU，再绘制到Canvas表面。这种模式下因为要把图片内容绘制到Canvas上，浏览器会判定为跨域资源读取行为，必须要图片服务端返回合法的CORS响应头，否则会被浏览器的安全策略直接拦截，根本拿不到图片的二进制数据。
• 为什么移动端全场景都正常、偏偏桌面端浏览器出问题？
  1. 移动端浏览器/系统WebView的跨域策略普遍比桌面端Chrome、Edge类浏览器宽松，很多无CORS头的图片资源，在移动端环境下走Canvaskit的跨域拉取不会被拦截，到桌面端就会被严格的跨域规则拦下。
  2. 2.0.1版本的Canvaskit实现没有和HTML渲染器做加载逻辑对齐：比如原生Image.network在Canvaskit模式下不会自动携带跨域请求需要的凭证（Cookie），桌面端浏览器对第三方Cookie的拦截更严格，会导致图片服务返回401/403的鉴权失败；而HTML渲染器的原生<img>标签在旧版本浏览器里会默认携带跨域Cookie，所以能正常加载。

• 第一步先确认根因：打开桌面端浏览器的开发者工具，看控制台是不是报了CORS跨域拦截的错误，或者图片请求的响应状态码是401/403。这两个是这个版本下Canvaskit图片加载失败的最高发原因。
• 如果是CORS拦截问题：要么给图片服务端配置允许你Web应用域名的CORS响应头，允许跨域拉取图片二进制；如果没法改服务端配置，可以在Web的入口页面加个同域的图片代理逻辑，绕开跨域限制。
• 如果是鉴权Cookie携带的问题：在Flutter 2.0.1版本下，可以给Image.network显式传入需要的鉴权Header，绕开自动Cookie携带的逻辑。
• 如果不想改服务端逻辑：直接固定用--web-renderer html模式打包就行，毕竟你已经验证过通过flutter build web --web-renderer html打出来的包，图片加载逻辑是完全正常的。

内容的提问来源于stack exchange，提问作者Mahmood Bkh