时间戳

首页 > 解决方案 > 无法使用 Flutter Image Network 从 Firebase 存储加载图像

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

问题描述

我在 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。(package: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) Image key: NetworkImage("http://(db-name).appspot.com/images/pablo-downloading .png"，比例：1.0) ═══════════════════════════════════════════════ ══════════════════════════════════════════════════ ════════

我在这里能错过什么？图像 url 的字符串以“ gs:// ”开头是否正常？我每次都必须对读写进行编码和解码吗？

标签： firebasefluttergoogle-cloud-firestorefirebase-storage

解决方案

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

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

您需要使用下载网址

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

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

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

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

推荐阅读