firebase存储如何显示图像

Question

我正在尝试使用 url 和 Image.network() 从 firebase 存储中获取图像。

但不知何故我卡住了。

我使用 firebase 存储文档中的这个示例：

   Future downloadURLExample() async {
   String downloadURL = await firebase_storage.FirebaseStorage.instance
      .ref('users/123/avatar.jpg')
      .getDownloadURL();

  // Within your widgets:
  // Image.network(downloadURL);
return downloadURL;

}

但我不知道如何将此字符串 downloadURL 放入我的容器并 Image.network。

我试着这样做：

Container(
 width: 200,
 height: 200,
 child: Image.network(downloadURL),
),

但是没用。我错过了什么？

Answer 1

// use firebase package as fb
import 'package:firebase/firebase.dart' as fb;
import 'package:flutter/material.dart';

class Example extends StatefulWidget {
  const Example({Key key}) : super(key: key);

  @override
  _ExampleState createState() => _ExampleState();
}

class _ExampleState extends State<Example> {
  //variable for the called photo uri
  Uri img;
  //
  downloadURLExample() {
    fb
        .storage()
        .refFromURL(
            'gs://******.appspot.com/users/123/avatar.jpg')
        .getDownloadURL()
        .then((value) => setState(() => img = value));
  }
  @override
  void initState() {
    //initialize method
    downloadURLExample();
    super.initState();
  }
  
  @override
  Widget build(BuildContext context) {
    return  img == null
          ? CircularProgressIndicator()
          : Container(
              width: 200,
              height: 200,
              child: Image.network(img.toString()),
          
    );
  }
}

Answer 2

问题是您正在尝试获取 downloadURL，它不在构建方法的 scope 中。您需要通过 downloadURLExample 方法获取下载 URL。

这是一个使用 FutureBuilder 的例子。

class MyStatefulWidget extends StatefulWidget {
  const MyStatefulWidget({Key key}) : super(key: key);

  @override
  State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  Future<String> _downloadURLFuture;

  @override
  void initState() {
    super.initState();
    _downloadURLFuture = downloadURLExample();    
  }

  Future<String> downloadURLExample() async {
    String downloadURL = await firebase_storage.FirebaseStorage.instance.ref('users/123/avatar.jpg').getDownloadURL();
    return downloadURL;
  }

  @override
  Widget build(BuildContext context) {
    return FutureBuilder<String>(
        future: _downloadURLFuture, 
        builder: (BuildContext context, AsyncSnapshot<String> snapshot) {
          if (snapshot.hasData) {
            final String downloadURL = snapshot.data;
            return Image.network(
              downloadURL,
              loadingBuilder: (BuildContext context, Widget child, ImageChunkEvent loadingProgress) {
                return Center(
                  child: CircularProgressIndicator(),
                );                  
              },
            );
          } else {
            return Center(
              child: CircularProgressIndicator(),
            );
          }
        },
    );
  }
}

firebase存储如何显示图像

firebase storage how to dispaly image

firebase

flutter

firebase-storage