Flutter 从 Firebase 存储中获取图像并在应用程序中显示

Question

我正在尝试从我的 firebase 存储中获取图像并将其添加到我的代码中。

我的代码：

loadImage() async{
  //current user id
  final _userID = FirebaseAuth.instance.currentUser!.uid;

  //collect the image name
  DocumentSnapshot variable = await FirebaseFirestore.instance.
    collection('data_user').  
    doc('user').
    collection('personal_data').
    doc(_userID).
    get();

    //a list of images names (i need only one)
    var _file_name = variable['path_profile_image'];



    //select the image url
    Reference  ref = FirebaseStorage.instance.ref().child("images/user/profile_images/${_userID}").child(_file_name[0]);
    
    //get image url from firebase storage
    var url = await ref.getDownloadURL();
    //logging
    print('Image Url: ' + url.toString());
    
    //return image.network 
    return Image.network(url.toString());
}

我为每个用户创建了一个文档。 在文档中我保存图像名称。 见数据库：

要获取个人资料图片，我会使用图片名称 并去firebase存储。 然后我获取与 firebase 数据库中的图像具有相同图像名称的图像。

Firebase 存储：

如何从 Firebase 存储中获取图像并将其显示在我的应用中？

Answer 1

您似乎是从您的 build 方法中调用 loadImage，这将不起作用，因为您无法异步加载小部件。

您可以做的是异步加载数据，然后将其存储在状态中。当您更新状态时，Flutter 会重新渲染 UI，以便它始终反映新状态。

所以解决的办法是把下载的URL保存在状态中，然后从那里加载。

loadImage() async{
  //current user id
  final _userID = FirebaseAuth.instance.currentUser!.uid;

  //collect the image name
  DocumentSnapshot variable = await FirebaseFirestore.instance.
    collection('data_user').  
    doc('user').
    collection('personal_data').
    doc(_userID).
    get();

    //a list of images names (i need only one)
    var _file_name = variable['path_profile_image'];

    //select the image url
    Reference  ref = FirebaseStorage.instance.ref().child("images/user/profile_images/${_userID}").child(_file_name[0]);
    
    //get image url from firebase storage
    var url = await ref.getDownloadURL();

    // put the URL in the state, so that the UI gets rerendered
    setState(() {
        url: url
    })   
}

然后你就可以在build方法中使用状态中的url了：

Image.network(url.toString());

现在唯一要做的就是调用一次loadImage，通常是在它所在的有状态小部件首次初始化时。

---

或者，您可以在构建方法中使用 FutureBuilder 来包装 Image.network 小部件，然后使用与此类似的方法在其中获取下载 URL：How to initialize a class with async

Answer 2

谢谢@弗兰克。 我明白了。 你拯救了我的一天（：

我的解决方案：

   import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:firebase_auth/firebase_auth.dart';
import 'package:firebase_storage/firebase_storage.dart';
import 'package:flutter/material.dart';



class DebugPage extends StatefulWidget {
  @override
  _DebugPage createState() => _DebugPage();
}

class _DebugPage extends State<DebugPage> {

  @override
  Widget build(BuildContext context) {
  return 
  new FutureBuilder <String>(
    future: loadImage(),
    builder: (BuildContext context, AsyncSnapshot<String> image) {
      if (image.hasData) {
        return Image.network(image.data.toString());  // image is ready
        //return Text('data');
      } else {
        return new Container();  // placeholder
      }
    },
  );
  }
}
  

Future <String> loadImage() async{
  //current user id
  final _userID = FirebaseAuth.instance.currentUser!.uid;

  //collect the image name
  DocumentSnapshot variable = await FirebaseFirestore.instance.
    collection('data_user').  
    doc('user').
    collection('personal_data').
    doc(_userID).
    get();

    //a list of images names (i need only one)
    var _file_name = variable['path_profile_image'];

    //select the image url
    Reference  ref = FirebaseStorage.instance.ref().child("images/user/profile_images/${_userID}").child(_file_name[0]);
    
    //get image url from firebase storage
    var url = await ref.getDownloadURL();
    print('url: ' + url);
    return url;
}