循环 Firestore 文档以显示元素

Question

我正在尝试循环遍历 Firestore 中传递到 Flutterflow 中的自定义操作的文档列表，并根据每个文档中包含的 photo_url 字段显示图像。我可以循环浏览并显示文档列表中的字符串，但图像是我遇到麻烦的地方。

我尝试按照“https://pub.dev/packages/pdf”上的“pdf”文档使用networkImage将图像包含在循环本身中，但遇到了异步/等待问题，因为它位于“构建”功能。因此，我在函数的开头放置了第二个循环，以填充稍后在构建函数的循环期间添加到 pdf 中的图像列表，但当我尝试使用 networkImage 时，该操作失败。

循环：

final doc_imgs = [];
  for (final doc in docs) {
    if (doc.photoUrl.isNotEmpty) {
      final img = await networkImage(doc.photoUrl);
      doc_imgs.add(img);
    }
  }

更新：经过进一步测试，networkImage 可以与其他 URL 一起使用，但不能与 Firestore 传递的 URL 一起使用。

Answer 1

您似乎在使用

networkImage

函数显示来自 Firestore URL 的图像时遇到了问题。由于您提到该函数适用于其他 URL，但不适用于从 Firestore 检索的 URL，因此您可以检查一些内容并尝试解决问题：

1. URL 格式验证:

• 确保 Firestore 中存储的 URL 有效且格式正确。有时，多余的空格或特殊字符可能会导致问题。
• 您可以使用

  print(doc.photoUrl)

  打印出 URL，看看是否有任何差异。

2. Firestore 存储规则：

• 如果您的图像存储在 Firebase 存储中，请确保存储规则允许对您尝试获取的网址进行读取访问。如果规则限制太多（例如，需要身份验证），则图像将无法加载。
• 尝试直接在浏览器中访问其中一个 URL，检查是否可以访问。

3. CORS问题：

• 如果图像托管在不同的域或服务器中，可能会出现 CORS（跨源资源共享）问题。例如，Firebase Storage 有时需要配置 CORS 标头以允许将图像加载到其他域中。
• 您可以使用如下 JSON 文件为 Firebase 存储设置 CORS：

  [
    {
      "origin": ["*"],
      "method": ["GET"],
      "maxAgeSeconds": 3600
    }
  ]
  

  使用 Firebase CLI 进行部署：

  gsutil cors set cors.json gs://your-bucket-name
  

4.

build

中的异步处理：

• 由于 Flutter 不允许在

  async

  函数中使用

  build

  ，您可以尝试使用 FutureBuilder 或类似技术来预获取图像。例如：

  Future<Uint8List> fetchImage(String url) async {
    final response = await http.get(Uri.parse(url));
    return response.bodyBytes;
  }
  
  FutureBuilder<Uint8List>(
    future: fetchImage(doc.photoUrl),
    builder: (context, snapshot) {
      if (snapshot.connectionState == ConnectionState.done) {
        return Image.memory(snapshot.data);
      } else {
        return CircularProgressIndicator();
      }
    },
  );
  

5. 替代图像加载：

• 您还可以尝试使用

  CachedNetworkImage

  而不是

  networkImage

  ，因为它可以处理缓存并提供更大的灵活性：

  CachedNetworkImage(
    imageUrl: doc.photoUrl,
    placeholder: (context, url) => CircularProgressIndicator(),
    errorWidget: (context, url, error) => Icon(Icons.error),
  );