Flutter通过NetworkImage加载CDN图片报ImageCodecException，Demo图可正常加载

这个场景在Flutter Web开发里非常常见，和图片本身能不能直接在浏览器地址栏打开没有必然关联，具体原因可以按概率从高到低排查：

• 跨域（CORS）限制（最高概率）
  测试正常的picsum.photos已经在服务端配置了跨域响应规则，允许任意来源的页面嵌入加载它的资源。而cdn.sportmonks.com的服务端没有给你的Flutter Web部署域名配置跨域放行权限。
  很多人会疑惑为什么浏览器地址栏输入URL能直接打开——因为地址栏打开属于页面导航请求，不属于跨域资源加载范畴，不会触发浏览器的同源策略拦截；但Flutter Web里通过NetworkImage发起的请求属于跨域资源请求，只要服务端没返回允许跨域的响应头，浏览器就会直接拦截响应，最终抛出编解码异常。
• CDN侧的请求校验拦截
  这类第三方体育数据的CDN大多配置了防盗链规则，会校验请求的Referer、来源域名信息，只有匹配白名单的请求才能正常拿到图片资源。Flutter Web发起的图片请求携带的请求头标识，和你手动在浏览器打开图片时自动携带的头信息存在差异，会被防盗链规则判定为异常请求直接拦截，通常这类请求在控制台能看到返回403状态码。
• 代码实现的小瑕疵
  你在ListRow组件里定义了入参imageUrl，但实际构建图片时是硬编码写死的图片地址，完全没有使用传入的参数，后续如果要做动态列表渲染，很容易出现资源加载错位的问题。

快速定位方法：打开浏览器开发者工具的控制台和网络面板，找到这个失败的图片请求，如果看到CORS policy相关的报错提示，就可以确定是跨域问题；如果看到请求返回403状态码，就是被CDN的防盗链规则拦截了。

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