Flutter加载Firebase Storage图片NetworkImage报错的替代方案

原生NetworkImage加载Firebase Storage签名链接失败，大多是因为默认请求头不符合存储规则校验、或是没有正确处理接口返回的302重定向，以下是可直接落地的解决方式：

该组件对带签名参数、存在重定向的网络图片兼容性远好于原生NetworkImage，同时支持本地内存+磁盘缓存，避免重复下载头像消耗流量。

• 第一步：在项目pubspec.yaml中添加依赖

dependencies:
  cached_network_image: ^3.3.1

执行flutter pub get完成安装。

• 第二步：替换原有加载代码，最简写法直接使用CachedNetworkImageProvider即可：

final Model.User user = Provider.of<UserProvider>(context).getuser;
CircleAvatar(
  backgroundImage: CachedNetworkImageProvider(user.photoUrl),
)

如需自定义加载状态、错误态，可以使用完整构造方法：

CircleAvatar(
  child: CachedNetworkImage(
    imageUrl: user.photoUrl,
    placeholder: (context, url) => const CircularProgressIndicator(strokeWidth: 2),
    errorWidget: (context, url, error) => const Icon(Icons.person, size: 30),
    imageBuilder: (context, imageProvider) => CircleAvatar(
      backgroundImage: imageProvider,
    ),
  ),
)

绝大多数移动端场景下，给NetworkImage加上标准图片请求Accept头即可正常加载，无需额外依赖：

import 'dart:io';

final Model.User user = Provider.of<UserProvider>(context).getuser;
CircleAvatar(
  backgroundImage: NetworkImage(
    user.photoUrl,
    headers: {
      HttpHeaders.acceptHeader: 'image/avif,image/webp,image/apng,image/svg+xml,image/*,*/*;q=0.8',
    },
  ),
)

• 必须使用Firebase Storage SDK返回的getDownloadURL()结果作为图片地址，手动拼接的URL会因为缺失签名token被服务端拒绝访问
• 如果是Web端加载报错，需要到Firebase Storage控制台配置CORS规则，放行本地调试端口和线上生产域名的跨域请求
• 如果下载URL是提前存在用户实体中的，注意Firebase Storage的对象签名token如果被手动重置，旧链接会直接失效，需要重新调用接口获取最新下载地址

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