英文:
Cloud Storage images not loading - Flutter, Firestore
问题
I understand that you want the code to be translated. Here's the translated code:
新手使用Flutter，需要一个页面来显示Cloud Storage目录中的所有图片。但目前代码不正确。
我的代码：
```dart
import 'package:flutter/material.dart';
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:firebase_storage/firebase_storage.dart';
import 'package:cached_network_image/cached_network_image.dart';
class MyImagePage extends StatefulWidget {
@override
_MyImagePageState createState() => _MyImagePageState();
}
class _MyImagePageState extends State<MyImagePage> {
String? _imageURL = '';
Future<void> getImageURL() async {
DocumentSnapshot snapshot = await FirebaseFirestore.instance
.collection('images')
.doc('IMG-20230506-WA0010')
.get();
if (snapshot.exists) {
String? imageURL = (snapshot.data() as Map<String, dynamic>)['url'];
setState(() {
_imageURL = imageURL;
});
}
}
@override
void initState() {
super.initState();
getImageURL();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('My Image Page'),
),
body: Center(
child: _imageURL == null
? CircularProgressIndicator()
: CachedNetworkImage(
imageUrl: _imageURL.toString(),
placeholder: (context, url) => CircularProgressIndicator(),
errorWidget: (context, url, error) => Icon(Icons.error),
),
),
);
}
}
您提到上面的代码不能显示文件夹中的所有图像，您需要进一步的帮助。同时，您分享了您的Cloud Storage截图。尝试更改文件夹和编辑文件名并没有改变结果的情况。如果需要更多帮助，请提供更多详细信息，以便我们能够更好地协助您。
英文:
New to flutter, need a page that would display all the images on the Cloud Storage directory. Not working correctly.
my code:
import 'package:flutter/material.dart';
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:firebase_storage/firebase_storage.dart';
import 'package:cached_network_image/cached_network_image.dart';
class MyImagePage extends StatefulWidget {
@override
_MyImagePageState createState() => _MyImagePageState();
}
class _MyImagePageState extends State<MyImagePage> {
String? _imageURL = '';
Future<void> getImageURL() async {
DocumentSnapshot snapshot = await FirebaseFirestore.instance
.collection('images')
.doc('IMG-20230506-WA0010')
.get();
if (snapshot.exists) {
String? imageURL = (snapshot.data() as Map<String, dynamic>)[
'url']; // Set the state of the _imageURL variable to trigger a rebuild of the widget tree
setState(() {
_imageURL = imageURL;
});
}
}
@override
void initState() {
super.initState();
getImageURL();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('My Image Page'),
),
body: Center(
child: _imageURL == null
? CircularProgressIndicator()
: CachedNetworkImage(
imageUrl: _imageURL.toString(),
placeholder: (context, url) => CircularProgressIndicator(),
errorWidget: (context, url, error) => Icon(Icons.error),
),
),
);
}
}
I am informed that the code above would not display all the images in the folder, in need for assistance with that too.
My Cloud Storage:
Tried changing folders and editing file names - did not anyhow change the result.
答案1
得分: 1
FirebaseFirestore 和 FirebaseStorage 之间有区别。你正在尝试从Firestore加载imageUrl，但它不存在。
DocumentSnapshot snapshot = await FirebaseFirestore.instance.collection('images').doc('IMG-20230506-WA0010').get();
使用 FirebaseStorage 如下：
void getUrl() async {
final ref = FirebaseStorage.instance.ref().child('images/yourFileName.png');
String url = await ref.getDownloadURL();
print(url);
}
英文:
There is a difference between FirebaseFirestore and FirebaseStorage. You're tyring to load the imageUrl from firestore, where it doesn't exist.
DocumentSnapshot snapshot = await FirebaseFirestore.instance.collection('images').doc('IMG-20230506-WA0010').get();
use FirebaseStorage like this:
void getUrl()async{
final ref = FirebaseStorage.instance.ref().child('images/yourFileName.png');
String url = await ref.getDownloadURL();
print(url);
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论