如何從 Flutter 中的 Firebase 存儲中檢索圖像 URL？

Question

在 Flutter 中，我在名為“parts_sales”的集合中注冊了一張圖片，我想通過 image.network(url) 加載這張圖片 url。 但是，我嘗試用print(url)打印url，卻提示我寫的代碼找不到這個url。

下面是完整的代碼。

import 'dart:io';

import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:firebase_auth/firebase_auth.dart';
import 'package:firebase_storage/firebase_storage.dart';
import 'package:flutter/material.dart';
import 'package:shipda/constants.dart';
import 'package:firebase_core/firebase_core.dart';
import 'package:image_picker/image_picker.dart';
import 'package:shipda/screens/parts_screen/image_container.dart';

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

  @override
  State<Test> createState() => _TestState();
}

class _TestState extends State<Test> {
  @override
  void initState() {
    super.initState();
    getData();
  }

  final FirebaseAuth auth = FirebaseAuth.instance;
  User? user = FirebaseAuth.instance.currentUser;
  final FirebaseFirestore firestore = FirebaseFirestore.instance;

  var resultData;
  var documentID;
  var imageUrl;

  // Get a document ID
  void getData() async {
    var querySnapshots = await collection.get();
    for (var snapshot in querySnapshots.docs){
      documentID = snapshot.id; // <-- document ID
    }

    var result = await firestore
        .collection('parts_sales')
        .doc(documentID)
        .get();

    setState(() {
      resultData = result.data();
    });

    var ref = FirebaseStorage.instance.ref().child('${resultData?['parts_image']}');
    // String url = (await ref.getDownloadURL().toString());
    var url = await ref.getDownloadURL();

    print(documentID);
    print(url);
  }

  var collection = FirebaseFirestore.instance.collection('parts_sales');


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: primary100,
        title: Text('Welcome To Test Mode'),
      ),
      body: Column(
        children: [
          Text('${resultData?['title']}'),
          Text('${resultData?['category']}'),
          Text('${resultData?['parts_image']}'),

        ],
      ),
    );
  }
}

以下是錯誤信息。

[VERBOSE-2:dart_vm_initializer.cc(41)] Unhandled Exception: [firebase_storage/object-not-found] No object exists at the desired reference.
#0      StandardMethodCodec.decodeEnvelope (package:flutter/src/services/message_codecs.dart:653:7)
#1      MethodChannel._invokeMethod (package:flutter/src/services/platform_channel.dart:296:18)
<asynchronous suspension>
#2      MethodChannel.invokeMapMethod (package:flutter/src/services/platform_channel.dart:499:43)
<asynchronous suspension>
#3      MethodChannelReference.getDownloadURL (package:firebase_storage_platform_interface/src/method_channel/method_channel_reference.dart:45:36)
<asynchronous suspension>
#4      _TestState.getData (package:project/test.dart:52:15)

上圖是 Firebase 存儲

上圖為 Cloud Firestore 收集文檔數據

我想我輸入的代碼是為了獲得正確的 url， var ref = FirebaseStorage.instance.ref().child('${resultData?['parts_image']}'); 和var url = await ref.getDownloadURL(); 但我根本無法解決。 我應該怎么辦？

Answer 1

setState((){}); 異步工作

您的問題可能是您在設置之前使用resultData 。

setState(() {
      resultData = result.data();
});
var ref = FirebaseStorage.instance.ref().child('${resultData?['parts_image']}'); 👈 resultData might not be set just yet

將其更改為：

var ref = FirebaseStorage.instance.ref().child('${result.data()?['parts_image']}');