Flutter中使用API获取图片时出现ProgressEvent异常问题求助

问题原因 #

这个异常通常由以下情况引发：

• user['picture']['thumbnail']获取的URL无效、无法访问，或是为空值
• 图片格式不被Flutter的图片编解码器支持
• 网络连接异常，无法正常拉取图片资源

解决方案 #

1. 验证图片URL有效性
   在代码中加入print(picture);，复制输出的URL到浏览器打开，确认能否正常显示图片。如果URL无效，需要检查数据来源的正确性。

2. 添加空值判断与兜底逻辑
   避免因URL为空导致加载异常，给图片URL设置默认值：

final picture = user['picture']?['thumbnail'] ?? '';

3. 处理加载错误
   给Image.network添加errorBuilder，加载失败时显示占位内容，防止崩溃：

Image.network(
  picture,
  errorBuilder: (context, error, stackTrace) {
    return const Icon(Icons.error_outline, color: Colors.red);
  },
)

4. 检查网络权限
   Android端需确保AndroidManifest.xml中已添加网络权限：

<uses-permission android:name="android.permission.INTERNET" />

修改后的完整代码示例 #

final picture = user['picture']?['thumbnail'] ?? '';
return ListTile(
  title: Text('$firstName $lastName'),
  subtitle: Text(email),
  leading: ClipRRect(
    borderRadius: BorderRadius.circular(10),
    child: picture.isNotEmpty
        ? Image.network(
            picture,
            errorBuilder: (context, error, stackTrace) {
              return const Icon(Icons.error_outline, color: Colors.red);
            },
          )
        : const Icon(Icons.person, size: 40),
  ),
);

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