Flutter Web 不显示 Firebase 存储中的 NetworkImages，但在 android 模拟器上完美运行

Posted 2023-02-23

【中文标题】Flutter Web 不显示 Firebase 存储中的 NetworkImages，但在 android 模拟器上完美运行

【英文标题】：Flutter Web not displaying NetworkImages from Firebase storage, works perfectly on android emulator however

【发布时间】：2021-06-04 02:58:30

【问题描述】：

如标题所示，我正在将我的应用程序部署到 Flutter Web 并显示来自 Firebase 存储的图片。在 android 模拟器上测试时，它可以完美运行并显示所有图像而没有错误。但是，当我将它部署到我的网络应用程序时，由于某种原因，图像根本不显示。下面我添加了相关代码 sn-p，它显示了我如何显示来自 Firebase 的图片（同样，它在 Android 模拟器上运行良好）以及网络应用程序尝试显示图片时出现的错误。

代码：

void checkImages() async 
    FirebaseFirestore.instance
        .collection("uploads")
        .where('username', isEqualTo: Constants.myName)
        .get()
        .then((querySnapshot) 
      querySnapshot.docs.forEach((result) 
        FirebaseFirestore.instance
            .collection("uploads")
            .doc(result.id)
            .collection("images")
            .get()
            .then((querySnapshot) 
          querySnapshot.docs.forEach((result) async 
            imageCount++;
            final ref =
                FirebaseStorage.instance.ref().child(result.data()['imageid']);
            url = await ref.getDownloadURL();
            setState(() 
              printImages();
            );
          );
        );
      );
    );
  

  printImages() 
    return List.generate(imageCount, (index) 
      return GestureDetector(
        onTap: () 
          print( "hello");
        ,
        child: Container(
          decoration: BoxDecoration(
            borderRadius: BorderRadius.all(
              Radius.circular(10),
            ),
          ),
          child: Image.network(
            url.toString(),
            fit: BoxFit.cover,
          ),
        ),
      );
    );
   

网络控制台出错：

main.dart.js?version=19:3082 Uncaught MissingPluginException(No implementation found for method StorageReference#getDownloadUrl on channel plugins.flutter.io/firebase_storage)
    at Object.a (https://social-io-102b4.firebaseapp.com/main.dart.js?version=19:3082:3)
    at https://social-io-102b4.firebaseapp.com/main.dart.js?version=19:53813:15
    at adv.a (https://social-io-102b4.firebaseapp.com/main.dart.js?version=19:4517:71)
    at adv.$2 (https://social-io-102b4.firebaseapp.com/main.dart.js?version=19:30063:23)
    at acI.$1 (https://social-io-102b4.firebaseapp.com/main.dart.js?version=19:30055:30)
    at No.mY (https://social-io-102b4.firebaseapp.com/main.dart.js?version=19:31072:40)
    at a82.$0 (https://social-io-102b4.firebaseapp.com/main.dart.js?version=19:30474:11)
    at Object.rs (https://social-io-102b4.firebaseapp.com/main.dart.js?version=19:4637:40)
    at a1.nL (https://social-io-102b4.firebaseapp.com/main.dart.js?version=19:30390:3)
    at a7V.$0 (https://social-io-102b4.firebaseapp.com/main.dart.js?version=19:30432:22)

此外，我很确定我已正确安装所有插件，因为它适用于 Android。任何帮助将不胜感激，谢谢。

【问题讨论】：

即使 Flutter Web 发布了稳定版本，仍有一些问题需要修复。即使我面临缺少插件实现的问题。如果你已经正确安装了所有的包，那么很可能它的网络支持还不合适。您应该在涉及开发人员的 github 上查找此问题。

【参考方案1】：

请尝试将此脚本标记添加到您的 index.html，在您使用 Firebase 凭据初始化它之后（在 Firebase 中添加新的网络应用时会得到它们）

//import the Firestore plugin
<script src="https://www.gstatic.com/firebasejs/8.2.10/firebase-firestore.js"></script>

看看这个网站，看看你可能想要导入的所有插件：

https://firebase.google.com/docs/web/setup#expandable-8

【讨论】：

谢谢！所以我确实已经安装了这个插件，但它是一个旧版本；在看到您发布的版本 8.2.10 的链接后，我意识到我的版本已经过时了。此外，阻止图像加载的另一件事是我需要 CORS 许可。