Flutter中Firebase新增数据后图片无法实时显示的解决方法

你遇到的核心问题是：在Firebase Storage的图片上传任务还未完成时，就把手动拼接的图片URL存入了Firestore。这时候图片还没完全上传到Storage，当下加载这个URL自然会失败；而重启应用时，上传任务已经完成，URL对应的文件可以正常访问，所以图片能显示。

另外，手动拼接URL的方式本身也不够可靠——如果文件名包含空格、特殊字符，会出现URL编码错误，导致访问失败。

我们需要等待图片上传任务完全完成，再通过Firebase SDK获取有效且可访问的下载URL，最后把这个URL存入Firestore。这样就能保证存入的URL是即时可用的。

修改后的完整createData函数 #

void createData() async {
  DateTime now = DateTime.now();
  String format = DateFormat('dd:mm:yy').format(now);
  var fullImageName = 'foto-$format.jpg';
  final StorageReference ref = FirebaseStorage.instance.ref().child(fullImageName);
  final StorageUploadTask task = ref.putFile(image);

  // 等待图片上传任务完成，获取上传快照
  StorageTaskSnapshot snapshot = await task.onComplete;
  // 通过快照获取官方生成的有效下载URL
  String downloadUrl = await snapshot.ref.getDownloadURL();

  if (_formKey.currentState.validate()) {
    _formKey.currentState.save();
    DocumentReference ref = await db
        .collection('resep')
        .add({
          'nama': nama, 
          'resep': resep, 
          'image': downloadUrl, 
          'email': widget.email
        });
    setState(() => id = ref.documentID);
    Navigator.of(context).pop();
  }
}

图片加载代码简化 #

因为getDownloadURL()返回的是完整的可访问链接（已经包含?alt=media等必要参数），所以加载代码可以简化：

child: Container(
  child: Image.network(doc.data["image"]),
  width: 170,
  height: 120,
),

关键修改点说明 #

1. 等待上传完成：用await task.onComplete确保图片完全上传到Storage后，再进行后续操作
2. 使用官方下载URL：通过snapshot.ref.getDownloadURL()获取的URL是Firebase官方生成的有效链接，避免手动拼接的编码错误和无效问题
3. 去掉冗余变量：删除了重复的fullImageName2，代码更简洁

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