Firebase存储图片无法加载问题求助

问题重现 #

代码如下：

String? downloadURL = userData['profile_image_url'];
if (downloadURL != null && downloadURL.isNotEmpty) {
  return CircleAvatar(
    radius: 50,
    backgroundImage: NetworkImage(downloadURL), // <--- 报错位置
  );
} else {
  return CircleAvatar(
    radius: 50,
    backgroundImage: AssetImage('assets/profile_picture_placeholder.png'),
  );
}

抛出错误：

======== Exception caught by image resource service ================================================
The following ProgressEvent$ object was thrown resolving an image codec: [object ProgressEvent]

谷歌图片链接可正常加载，仅Firebase存储链接失效。

解决方案 #

• 检查Firebase存储访问规则
  默认情况下Firebase存储的文件是私有状态，需调整存储规则允许读取：

  rules_version = '2';
  service firebase.storage {
    match /b/{bucket}/o {
      match /{allPaths=**} {
        // 允许已认证用户读取，适合需要登录的场景
        allow read: if request.auth != null;
        // 若需公开访问（谨慎使用），替换为：allow read: if true;
      }
    }
  }
  

  修改后记得在Firebase控制台发布规则。

• 验证下载链接有效性
  直接复制downloadURL到浏览器地址栏打开：

  • 若无法显示图片，说明链接本身无效——可能是生成链接时路径错误，或是临时下载URL已过期，需重新生成有效链接。
  • 打印downloadURL的值，确认无多余字符（如空格、转义符）。

• 添加错误处理与网络检查
  给图片加载增加错误回退，同时确保设备网络正常，无防火墙/代理限制Firebase存储域名：

  String? downloadURL = userData['profile_image_url'];
  if (downloadURL != null && downloadURL.isNotEmpty) {
    return CircleAvatar(
      radius: 50,
      child: Image.network(
        downloadURL,
        fit: BoxFit.cover,
        errorBuilder: (context, error, stackTrace) {
          return Image.asset('assets/profile_picture_placeholder.png');
        },
      ),
    );
  } else {
    return CircleAvatar(
      radius: 50,
      backgroundImage: AssetImage('assets/profile_picture_placeholder.png'),
    );
  }
  

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