firebase - 如何使用Flutter在Firestore中显示图像文件

Question

我发现以下问题。然后我明白了。

Flutter / FireStore: how to display an image from Firestore in Flutter?

文件上传成功。

var imgUrl = await ref.getDownloadURL();
print(imgUrl.toString());

但是我有以下错误。
看来我也一样。

Unhandled Exception: PlatformException(Error -13010, FIRStorageErrorDomain, Object images/cars/40711b90-9db4-11ea-c602-a557c9b7697a.jpeg does not exist.)

但是我不知道如何显示和处理它。

请给我建议。谢谢。

Answer 1

您需要先将网址添加到Firestore:

          StorageTaskSnapshot snapshot = await storage
              .ref()
              .child("images/$imageName")
              .putFile(file)
              .onComplete;
          if (snapshot.error == null) {
            final String downloadUrl =
                await snapshot.ref.getDownloadURL();
            await Firestore.instance
                .collection("images")
                .add({"url": downloadUrl, "name": imageName});
             }

现在，在Firestore中，您将具有名为 images的集合，并带有图像URL和图像名称的文档。方法 getDownloadUrl()返回图像的url，因此您可以将其存储在Firestore中。然后要显示它，您可以执行以下操作:

body: Container(
  padding: EdgeInsets.all(10.0),
  child: FutureBuilder(
    future: getImages(),
    builder: (context, AsyncSnapshot<QuerySnapshot> snapshot) {
      if (snapshot.connectionState == ConnectionState.done) {
        return ListView.builder(
            shrinkWrap: true,
            itemCount: snapshot.data.documents.length,
            itemBuilder: (BuildContext context, int index) {
              return ListTile(
                contentPadding: EdgeInsets.all(8.0),
                title:
                    Text(snapshot.data.documents[index].data["name"]),
                leading: Image.network(
                    snapshot.data.documents[index].data["url"],
                    fit: BoxFit.fill),
              );
            });
      } else if (snapshot.connectionState == ConnectionState.none) {
        return Text("No data");
      }
      return CircularProgressIndicator();
    },
  ),
),

/// code here

  Future<QuerySnapshot> getImages() {
    return fb.collection("images").getDocuments();
  }

在这里，您使用 getImages()方法，该方法从集合 images中检索所有图像。要显示图像，您可以使用 Image.network小部件。