Question

我的代码是正常的，但是如果我向Firebase添加数据，则不会出现该图像，但是如果它已重新启动，则该应用程序会单独出现并且该图像成功出现，如何解决？

child: new Container(
       child: Image.network(
            '${doc.data["image"]}' + '?alt=media',),
             width: 170,
             height: 120,
  ),

这是添加代码的代码

void createData() async {
    DateTime now = DateTime.now();
    String format = DateFormat('dd:mm:yy').format(now);
    var fullImageName = 'foto-$format' + '.jpg';
    var fullImageName2 = 'foto-$format' + '.jpg';

    final StorageReference ref =
        FirebaseStorage.instance.ref().child(fullImageName);
    final StorageUploadTask task = ref.putFile(image);

    var part1 =
        'https://firebasestorage.googleapis.com/v0/b/db-tubes.appspot.com/o/';

    var fullPathImage = part1 + fullImageName2;
    print(fullPathImage);

    if (_formKey.currentState.validate()) {
      _formKey.currentState.save();
      DocumentReference ref = await db
          .collection('resep')
          .add({'nama': '$nama', 'resep': '$resep', 'image': '$fullPathImage', 'email' : widget.email});
      setState(() => id = ref.documentID);
      Navigator.of(context).pop(); 
    }
  }

Answer 1

这只是您的想法的演示。

Future uploadFile() async {    
   StorageReference storageReference = FirebaseStorage.instance    
       .ref()    
       .child('chats/${Path.basename(_image.path)}}');    
   StorageUploadTask uploadTask = storageReference.putFile(_image);    
   await uploadTask.onComplete;    
   print('File Uploaded');    
   storageReference.getDownloadURL().then((fileURL) {    
     setState(() {    
       _uploadedFileURL = fileURL;    
     });    
   });    
 }

在setState中，将该URL放入本地变量，并将该本地变量用作网络的图像文件，它将在下一次创建Dom时自动获取。

Answer 2

StorageUploadTask task是Future，因此您需要等待上传任务完成才能获取URL

尝试

void createData() async {
    DateTime now = DateTime.now();
    String format = DateFormat('dd:mm:yy').format(now);
    var fullImageName = 'foto-$format' + '.jpg';
    var fullImageName2 = 'foto-$format' + '.jpg';

    final StorageReference ref =
        FirebaseStorage.instance.ref().child(fullImageName);
    final StorageUploadTask task = ref.putFile(image);

    // Wait upload task to complete
    final StorageTaskSnapshot downloadUrl = 
    (await task.onComplete);
    // Get image uRL
    final String url = (await downloadUrl.ref.getDownloadURL());


    if (_formKey.currentState.validate()) {
      _formKey.currentState.save();
      DocumentReference ref = await db
          .collection('resep')
          .add({'nama': '$nama', 'resep': '$resep', 'image': '$url', 'email' : widget.email});
      setState(() => id = ref.documentID);
      Navigator.of(context).pop(); 
    }
  }
}

Answer 3

如果刷新窗口小部件时图像未更新，我在这里看到一个常见的问题，即将文件写入Firebase存储中的相同地址/名称。如果文件名与旧文件名相同，例如：“ 2019-11-19-file.jpg”，则图像小部件会以某种方式不理解该图像已更新。如果您再次写入，它将不会更新。

在这种情况下，您应该使文件名具有随机组成部分，例如UTC毫秒时间戳名称（“ 1234512312-file.jpg”），或者在末尾添加“＆random = [在此处插入随机数]”图片网址字符串。

如何使图像添加到Firebase后立即显示而无需重新启动fluter

3 个答案: