如何将图像从 Firebase 存储显示到小部件中？

Posted 2023-02-23

【中文标题】如何将图像从 Firebase 存储显示到小部件中？

【英文标题】：How to display image from firebase storage into widget?

【发布时间】：2019-04-17 09:39:55

【问题描述】：

我想将保存在firebase storage 中的图像显示到一个小部件中，该小部件在我的屏幕上显示profile picture。 目前我能够获得download url，但不确定如何使用将图像显示到小部件中的那个url。这是显示 profile picture UI 的代码，我想用来自 firebase 的图像更新（即在 ClipOval 小部件内）

@override
  Widget build(BuildContext context) 
    return Scaffold(
        appBar: AppBar(
          title: Text('Edit Profile'),
          actions: <Widget>[
            new Center(child: new Text('SAVE')),
          ],
        ),
        body: new Stack(
          children: <Widget>[
            Positioned(
              width: 410.0,
              top: MediaQuery
                  .of(context)
                  .size
                  .height / 25,
              child: Column(children: <Widget>[
                Container(
                  child: user.profilePhoto == ""
                      ? Image.asset('icons/default_profile_icon.png',
                      height: 110.0)
                      : ClipOval(
                    child: _imageFile == null ? Image.asset('icons/default_profile_icon.png', height: 110.0,)
                    :Image.file(_imageFile,fit: BoxFit.cover,
                    width: 110.0,
                    height: 110.0,)
                  ),
                ),

这就是我从firebase storage 获取图像的方式，它返回下载网址：

   displayFile(imageFile) async 

    String fileName = 'images/profile_pics/' + this.firebaseUser.uid + ".jpeg";
    var data = await FirebaseStorage.instance.ref().child(fileName).getData(10000000);
    var text = new String.fromCharCodes(data);
    return new NetworkImage(text);

  

我是否需要使用NetworkImage 或cached-network-image 或cache_image 小部件来实现这一点？

【参考方案1】：

让NetworkImage做下载

var ref = FirebaseStorage.instance.ref().child(fileName)
String location = await ref.getDownloadURL();
return new NetworkImage(downloadUrl);

更新

String _imageUrl;

void initState() 
  super.initState();

  var ref = FirebaseStorage.instance.ref().child(fileName)
  ref.getDownloadURL().then((loc) => setState(() => _imageUrl = loc));

...

        child: _imageUrl == null ? Image.asset('icons/default_profile_icon.png', height: 110.0,)
                :ImageNetwork(_imageUrl,fit: BoxFit.cover,

【讨论】：

我认为displayFile 方法与您建议的方法相似。如何在ClipOval 小部件中使用它以便显示图像？ @Günter Zöchbauer

对不起，我不明白你的问题。如果你想自己下载图片（.getData(...)），那么你需要MemoryImage而不是NetworkImage。

对不起，如果我之前不清楚。我不确定如何在构建小部件下使用 clipoval 小部件内的下载 url。如果您当前看到它使用 Image.file 显示来自相机和画廊的图像，但不会持续存在。如何使用 NetworkImage 或您在 clipoval 中建议的代码来显示来自 clipoval 内部的存储图像？ @Günter Zöchbauer

不确定是什么问题。我更新我的答案。也许这就是你要找的。​​span>

是的，这就是我想要的。不过有一个小问题，现在每当我从相机或图库中选择图像时，它都不会立即反映在 ClipOval 中。如果我转到其他屏幕然后返回，那么我会看到小部件更新为最新图片。你知道为什么会发生这种情况吗？我期待看到图像捕获或从图库中选择立即显示。 @Günter Zöchbauer