Flutter应用无法加载Firebase Storage图片问题求助

• NetworkImage可正常加载普通外链图片，但Firebase Storage中的图片加载失败
• 控制台输出的Storage图片链接在浏览器中能正常打开
• Firebase Storage规则已设置为公开访问
• 尝试调整图片元数据等方法无效，已卡3天

图片加载代码 #

usuario.isLoggedIn                   
? FutureBuilder<String?>(                  
     future: _loadUserAvatar(),                
       builder: (context, snapshot) {
                         if (snapshot.connectionState == ConnectionState.waiting) {
                           return CircleAvatar(
                             maxRadius: 40,
                             backgroundColor: Colors.white,
                             child: CircularProgressIndicator(
                               color: colorPrimary,
                             ),                           );
                         } else if (snapshot.hasData && snapshot.data != null) {
                           return CircleAvatar(
                             backgroundImage: NetworkImage(snapshot.data!),
                             maxRadius: 40,
                             backgroundColor: Colors.white,
                           );
                         } else {
                           return CircleAvatar(
                             backgroundImage: const AssetImage('icons/user.png'),
                             maxRadius: 40,
                             backgroundColor: Colors.white,
                           );
                         }
                       },
                     )
                   : CircleAvatar(
                       child: Icon(
                         Icons.person,
                         color: colorPrimary,
                         size: 50,
                       ),
                       maxRadius: 40,
                       backgroundColor: Colors.white,
                     ), 

报错日志 #

══╡ EXCEPTION CAUGHT BY IMAGE RESOURCE SERVICE ╞════════════════════════════════════════════════════
The following ProgressEvent object was thrown resolving an image codec:
[object ProgressEvent]
When the exception was thrown, this was the stack
Image provider:
NetworkImage("https://firebasestorage.googleapis.com/v0/b/comp...-8161d.firebasestorage.app/o/...",
scale: 1.0)
Image key:
NetworkImage("https://firebasestorage.googleapis.com/v0/b/comp...-8161d.firebasestorage.app/o/...",
scale: 1.0)

图片上传代码 #

Future<String?> _uploadAvatarImage(Uint8List imageBytes) async {
 try {
    final img.Image? originalImage = img.decodeImage(imageBytes);
 if (originalImage == null) { throw Exception("Falha ao decodificar a imagem");
 } final img.Image resizedImage = img.copyResize(originalImage,
 width: 256,
 height: 256
);
 String fileExtension;
 String contentType;
 Uint8List resizedBytes;
if (imageBytes[0] == 0xFF && imageBytes[1] == 0xD8 && imageBytes[2] == 0xFF) {
  fileExtension = '.jpg';
  contentType = 'image/jpeg';
  resizedBytes = Uint8List.fromList(img.encodeJpg(resizedImage));
} else if (imageBytes[0] == 137 && imageBytes[1] == 80 && imageBytes[2] == 78) {
  fileExtension = '.png';
  contentType = 'image/png';
  resizedBytes = Uint8List.fromList(img.encodePng(resizedImage));
} else {
  throw Exception("Formato de imagem não suportado");
}
final String userId = FirebaseAuth.instance.currentUser!.uid;
final Reference storageRef = FirebaseStorage.instance
    .ref()
    .child("user_avatars/$userId$fileExtension");
final SettableMetadata metadata = SettableMetadata(contentType: contentType);
await storageRef.putData(resizedBytes, metadata);
final String imageUrl = await storageRef.getDownloadURL();

return imageUrl;
} catch (e, stacktrace) { print("Erro ao fazer upload da imagem: $e"); print("Stacktrace: $stacktrace");
 return null;
 }
 
}

排查与解决方案 #

1. 修复URL编码问题 #

Firebase Storage下载URL若包含特殊字符（如空格、中文），需确保返回的URL已正确编码。在_loadUserAvatar()返回URL前添加编码：

return Uri.encodeFull(imageUrl);

也可以直接打印snapshot.data，检查是否存在未编码的字符（正确应为%20替代空格）。

2. 强制设置图片请求头 #

尝试在NetworkImage中指定Accept头，确保服务端返回正确的图片格式：

NetworkImage(
  snapshot.data!,
  headers: {'Accept': 'image/*'},
)

同时在Firebase控制台确认图片元数据的contentType是否与实际格式匹配（如image/jpeg对应JPG）。

3. 清理Flutter图片缓存 #

Flutter可能缓存了之前加载失败的图片，在加载前清理缓存：

import 'package:flutter/services.dart';

// 在initState或加载图片前调用
await ImageCache().clear();
if (snapshot.data != null) {
  await DefaultAssetBundle.of(context).evict(snapshot.data!);
}

4. 检查平台网络权限 #

• Android：确保AndroidManifest.xml添加网络权限

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

• iOS：在Info.plist中配置ATS（允许网络请求）

  <key>NSAppTransportSecurity</key>
  <dict>
    <key>NSAllowsArbitraryLoads</key>
    <true/>
  </dict>
  

5. 调试网络请求细节 #

用HttpClient手动请求URL，查看具体错误：

import 'dart:io';
import 'dart:convert';

Future<void> debugStorageUrl(String url) async {
  final client = HttpClient();
  try {
    final request = await client.getUrl(Uri.parse(url));
    final response = await request.close();
    print('状态码: ${response.statusCode}');
    print('响应头: ${response.headers}');
    if (response.statusCode != 200) {
      final content = await response.transform(utf8.decoder).join();
      print('响应内容: $content');
    }
  } catch (e) {
    print('请求错误: $e');
  } finally {
    client.close();
  }
}

在_loadUserAvatar()获取URL后调用此方法，排查是否存在403/404等状态码。

6. 避免FutureBuilder重复执行请求 #

如果_loadUserAvatar()直接写在build方法中，会导致每次页面重建都重新请求URL，引发异常。将Future存储为State变量：

late final Future<String?> _avatarFuture;

@override
void initState() {
  super.initState();
  _avatarFuture = _loadUserAvatar();
}

// 在FutureBuilder中使用_avatarFuture
FutureBuilder<String?>(
  future: _avatarFuture,
  builder: (context, snapshot) {
    // ...原有逻辑
  },
)

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