无法使用 Flutter Image Network 从 Firebase 存储加载图像

Posted 2023-02-23

【中文标题】无法使用 Flutter Image Network 从 Firebase 存储加载图像

【英文标题】：Unable to load image from Firebase Storage using Flutter Image Network

【发布时间】：2020-12-16 09:40:54

【问题描述】：

我在 Firestore 中创建了项目的虚拟列表，并将图像存储在我的存储中。

这是我读取图像表单的代码 孩子：ListView.separated(

              itemBuilder: (context, int index) 
                return ListTile(
                  leading: Image.network(
                    itemNotifier.itemList[index].imageURL),
                    width: 100.0,
                    height: 100.0,
                  ),
                  title: Text('$itemNotifier.itemList[index].name'),
                  subtitle: Text(
                    '$itemNotifier.itemList[index].description',
                    maxLines: 2,
                  ),
                  trailing: Text(
                    '$itemNotifier.itemList[index].price.toString()',
                  ),
                );

我尝试查看此项目列表页面时遇到的错误如下：

════════图片资源服务捕获的异常═══════════════════════════════ ═══════════════ 解析图像编解码器时引发了以下 NetworkImageLoadException： HTTP 请求失败，状态码：404，http://(db-name).appspot.com/images/pablo-downloading.png

当异常被抛出时，这是堆栈： #0 NetworkImage._loadAsync (package:flutter/src/painting/_network_image_io.dart:95:9) #1 NetworkImage.load (package:flutter/src/painting/_network_image_io.dart:48:14) #2 ImageProvider.resolveStreamForKey。 （包：flutter/src/painting/image_provider.dart:501:13） #3 ImageCache.putIfAbsent (package:flutter/src/painting/image_cache.dart:359:22) ... 图片提供者：NetworkImage("http://(db-name).appspot.com/images/pablo-downloading.png", scale: 1.0) 图片键：NetworkImage("http://(db-name).appspot.com/images/pablo-downloading.png", scale: 1.0) ══════════════════════════════════════════════════ ══════════════════════════════════════════════════

我会在这里遗漏什么？图片网址的字符串以“gs://”开头是否正常？每次读写都需要编码和解码吗？

【参考方案1】：

您上传到 Firebase 存储的每张图片都会生成两个网址

存储地址（以 gs:// 开头） 下载地址（以https://开头）

你需要使用下载地址

要在 Flutter 中获取下载 url，您可以参考以下代码块 存储参考

firebaseStorageRef=FirebaseStorage.instance.ref().child('fileName');   
var url = await firebaseStorageRef.getDownloadURL();

要从 firebase 存储 UI 控制台获取下载链接，请单击图像，将出现一个左侧对话框，然后右键单击带蓝色下划线的图像名称，然后单击在新选项卡中打开

参考 https://***.com/a/41767410/11330119

【讨论】：

这是我目前的存储规则。

图片url的字符串以gs://开头是否正常？每次读写都需要编码和解码吗？

你如何在flutter中从firebase存储中获取图片链接来获取图片链接你可以使用下面的代码sn-p StorageReference firebaseStorageRef =FirebaseStorage.instance.ref().child('fileName'); url = await firebaseStorageRef.getDownloadURL();

Firebase 存储图片示例链接firebasestorage.googleapis.com/b/bucket/o/images%20stars.jpg

这是我用来从 DB 中读取的 getter 方法。我还尝试用您在上面发送的链接替换我的图像的字符串 url，它仍然是同一件事。 getItems(ItemNotifier itemNotifier) async QuerySnapshot 快照 = await itemCollection.getDocuments();列表 _itemList = []; snapshot.documents.forEach((document) Item item = Item.fromMap(document.data); _itemList.add(item); ); itemNotifier.itemList = _itemList;