如何使用我存储在数据库中的文件名从 Firebase 存储中获取图像？答案

【问题标题】：How can I get a image from Firebase storage with the file name I stored in the database?如何使用我存储在数据库中的文件名从 Firebase 存储中获取图像？
【发布时间】：2020-12-10 11:27:55
【问题描述】：

我将图像存储在 Firebase 存储和 Firestore 中的图像路径中，如何使用保存在 Firestore 中的路径获取该特定图像？

  getImagePath() async {
    var document = await firestoreInstance
        .collection("products")
        .document(widget.productId)
        .get();

    String path = document["filePath"];
    setState(() {
      filePath = path;
    });
  }

我是这样从 Firestore 获取文件名的，如何使用此文件名获取图像？

【问题讨论】：

文件路径是什么样的，你能评论一下吗？
"image_picker4011381564582645700.jpg" 像这样
当您将图像上传到 Firebase 时，您应该获取下载链接并存储它。

标签： firebase flutter dart google-cloud-firestore

【解决方案1】：

您也可以使用 FirebaseImage 小部件

         CircleAvatar(
        backgroundColor: Colors.black,   
        backgroundImage:
   FirebaseImage('gs://yourapp=67791.appspot.com/images/cPW7zkbCpYQT2II7JqEOcUK5rOm2.png'),
                     )

【讨论】：

【解决方案2】：

我可以给你一个想法。既然您评论说您的filePath 看起来像这样image_picker4011381564582645700.jpg，那么您必须只存储文件名。然后，您可以在firebase_storage 的帮助下完成类似的操作

String getStorageUrl(String fileName) async {
   
   String url = "";
   StorageReference storageReference = FirebaseStorage.instance.ref().child("folder/$fileName");
   url = await storageReference.getDownloadURL();
   return url;
}

在你想要的地方调用函数。或者在你的情况下，

getImagePath() async {
  var document = await firestoreInstance
      .collection("products")
      .document(widget.productId)
      .get();

  String path = await getStorageUrl(document["filePath"]);
  setState(() {
    filePath = path;
  });
}

然后您可以在 Image.network() 中使用该 URL 来显示它，或者如果您有其他计划，您可以使用 flutter_downloader。
确保您使用正确的文件夹名称更改功能。希望这适合您的情况。

提示：最好将完整的 URL 存储到数据库中，而不是只保存文件名。

【讨论】：

谢谢兄弟，它正在工作，但加载时间太长
是的！这取决于您的文件大小和网速。这就是为什么如果您可以将整个downloadURL 存储在数据库中，则可以节省.getDownloadURL() 的时间。

【解决方案3】：

NetworkImage() 和 Image.network() 直接从给定的 Firebase 图像存储中获取图像

//To set image on background

CircleAvatar(
  backgroundColor: Colors.transparent,foregroundColor:Colors.blueAccent,
  radius:16,
  backgroundImage:NetworkImage(filepath),
  child: FlatButton(
    onPressed: (){
      print("button pressed");},
    ),
  ),

//within child 

Container(
   child:Image.network(filepath),
);

【讨论】：