如何显示保存的图像？

Question

我试图在颤动中显示用户图像。目前用户可以打开相机或画廊并选择或拍照。而且我也将它上传到存储中。但是我怎样才能在我的应用程序中显示这些图片呢？这就是参与方式。 所以这里是我想展示我的照片的地方：

 child: CircleAvatar(
                      radius: 70,
                      child:_pickedImage ==null ?Text("Picture"):null,
                      backgroundImage: _pickedImage!=null?FileImage(_pickedImage):null,
                    ),

这就是我创建图片的方式加载它等等......

 Future _loadPicker(ImageSource source) async {
    final picked = await picker.getImage(source: source);
    if (this.mounted) { // This checks if the widget is still in the tree
      setState(()  {
        setState(() {
          if (picked != null) {
            _cropImage(picked);
          } else {
            print('No image selected.');
          }
        });
        //Navigator.pop(context);
      });
    }
  }
  _cropImage(PickedFile picked) async {
    File cropped = await ImageCropper.cropImage(
      sourcePath: picked.path,
      aspectRatioPresets: [
        CropAspectRatioPreset.original,
        CropAspectRatioPreset.ratio16x9,
        CropAspectRatioPreset.ratio5x4
      ],
      maxWidth: 800,
    );
    if (cropped != null) {
      setState(() {
        _pickedImage = cropped;
      });
      final addDir= await syspath.getApplicationDocumentsDirectory();
     final filename= path.basename(cropped.path);
     final savedImage = await cropped.copy('${addDir.path}/$filename');
    }
  }

  void _showPickOptionsDialog(BuildContext context) {
    showDialog(
      context: context,
      builder: (context) => AlertDialog(
        content: Column(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            ListTile(
              title: Text("Pick from Gallery"),
              onTap: () {
                _loadPicker(ImageSource.gallery);
                Navigator.pop(context);
              },
            ),
            ListTile(
              title: Text("Take a picture"),
              onTap: () {
                _loadPicker(ImageSource.camera);
                Navigator.pop(context);
              },
            )
          ],
        ),
      ),
    );
  }

这就是我在保存按钮上使用的将图片保存到存储中：

  final ref= FirebaseStorage.instance.ref().child('user_profile_pictures').child(user.uid+'.jpg');
                  await ref.putFile(_pickedImage).whenComplete;

希望有人能帮忙谢谢。

Answer 1

有很多关于它的文章问题，但对我来说最好的是FlutterFire documentation：

在许多用例中，您可能希望显示存储在存储器中的图像 应用程序中的存储桶，使用 Firebase 作为可扩展且 具有成本效益的内容分发网络 (CDN)。 Firebase 允许您 检索可以使用的长期下载 URL。请求一个 下载 URL，在引用上调用 getDownloadURL 方法：

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

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

不确定要添加什么，因为它很清楚。您可以随时搜索更多，因为这样的问题示例非常多：one、two、three。