Flutter中NetworkImage加载图片报错Connection closed的解决办法

问题 #

部分图片无法显示，其中标题为Surya 16、La bold和鸡蛋的图片可正常加载，Paket A的图片不行。使用Flutter的Image.network组件加载本地服务（http://10.0.2.2:8000）图片，代码如下：

Image.network('http://10.0.2.2:8000/${widget.product.imageUrl}', fit: BoxFit.cover),

出现HttpException错误：Connection closed while receiving data，对应图片地址为http://10.0.2.2:8000/uploads/products/0-1713659504.png。尝试使用CachedNetworkImage组件及参考Stack Overflow相关方案后问题仍未解决，寻求修复方法。

修复方案 #

• 检查图片文件与服务端配置：直接在浏览器中访问报错的图片地址http://10.0.2.2:8000/uploads/products/0-1713659504.png，确认是否能正常显示。如果无法打开，说明图片文件损坏、路径配置错误或服务端未正确映射静态资源目录，优先排查服务端问题。
• 调整Image.network的超时与请求头：默认的网络请求超时可能过短，加上keep-alive请求头维持连接，延长超时时间，代码示例：

  Image.network(
    'http://10.0.2.2:8000/${widget.product.imageUrl}',
    fit: BoxFit.cover,
    timeout: const Duration(seconds: 15),
    headers: const {'Connection': 'keep-alive'},
    errorBuilder: (context, error, stackTrace) => const Icon(Icons.error),
  )
  

• 排查服务端CORS设置：部分后端框架会限制跨域请求，确保服务端允许来自Flutter模拟器（10.0.2.2）的请求访问静态资源，可在服务端配置中添加对应的允许规则。
• 切换本地资源加载方式：开发阶段可将图片放入Flutter项目的assets目录，通过Image.asset加载，绕过网络请求环节，验证图片本身是否可用。
• 检查模拟器网络状态：关闭模拟器的代理设置，确保设备能正常访问本地服务地址http://10.0.2.2:8000，可通过浏览器或curl命令测试连通性。

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