Flutter: изображение не отображается, несмотря на правильный URL-адрес хранилища Firebase и шаблон MVC с GetX
Я столкнулся с проблемой в своем приложении Flutter, когда я пытаюсь отобразить изображение, полученное из хранилища Firebase. URL-адрес хранилища Firebase извлекается правильно, но изображение вообще не отображается в моем приложении.
Обзор кода
Я реализовал шаблон MVC, используя пакет Get (package:get/get.dart
) в моем приложении Flutter. Соответствующий код включает в себяFirebaseStorageService
class() для получения URL-адреса изображения, класса контроллера() и основного файла приложения(), где я использую для загрузки изображения.
Проблема и ошибка
Ошибка, с которой я столкнулся в консоли, выглядит следующим образом:
[Log] The following ImageCodecException was thrown resolving an image codec: (dart_sdk.js, line 29573)
[Log] Failed to decode image data. (dart_sdk.js, line 29573)
[Log] Image source: encoded image bytes (dart_sdk.js, line 29573)
Фрагменты кода
firebase_storage_service.dart
для получения URL-адреса изображения.
Reference get firebaseStorage => FirebaseStorage.instance.ref();
class FirebaseStorageService extends GetxService {
final Logger _logger = Logger();
Future<String?> getImage(String? imgName) async {
if (imgName == null) return null;
try {
var urlRef = firebaseStorage.child(StorageConstants.postMediaDir).child(
'${imgName.toLowerCase()}.png'); // image might be other than .png
var imgUrl = await urlRef.getDownloadURL();
_logger.i('Image retrieved successfully: $imgUrl'); // log success
return imgUrl;
} catch (e) {
_logger.e('Error getting image: $e'); // log
return e.toString();
}
}
}
post_controller.dart
для обработки логики получения URL-адреса изображения. для обработки логики получения URL-адреса изображения.
import 'package:get/get.dart';
import 'package:logger/logger.dart';
import '../services/firebase_storage_service.dart';
class PostController extends GetxController {
final Logger _logger = Logger();
@override
void onReady() {
super.onReady();
_logger.i('PostController is ready.');
}
static Future<String?> getPostImage({String? imgName}) async {
try {
final imgUrl = await Get.find<FirebaseStorageService>().getImage(imgName);
// Add log for successful image retrieval
Get.find<PostController>()
._logger
.i('Image retrieved successfully: $imgUrl');
return imgUrl;
} catch (e) {
// Add log for error during image retrieval
Get.find<PostController>()._logger.e('Error getting image: $e');
return null;
}
}
}
main.dart
для создания пользовательского интерфейса и использованияFutureBuilder
чтобы загрузить изображение.
class _MyAppStateful extends StatefulWidget {
const _MyAppStateful({Key? key}) : super(key: key);
@override
__MyAppState createState() => __MyAppState();
}
class __MyAppState extends State<_MyAppStateful> {
late final PostController _postController;
final RxString imgUrl = ''.obs;
@override
void initState() {
super.initState();
Get.put(FirebaseStorageService());
_postController = Get.put(PostController());
}
final Logger _logger = Logger();
@override
Widget build(BuildContext context) {
_logger.d('Building widget...');
return Scaffold(
body: FutureBuilder<String?>(
future: PostController.getPostImage(imgName: '1'),
builder: (context, snapshot) {
if (snapshot.connectionState == ConnectionState.waiting) {
_logger.d('Waiting for the future...');
return const Center(
child: CircularProgressIndicator(),
);
} else if (snapshot.hasError) {
_logger.e('Error loading image: ${snapshot.error}');
return const Center(
child: Text('Error loading image'),
);
} else {
String imgUrl = snapshot.data ?? '';
_logger.d('Image URL: $imgUrl');
return _buildImageList();
}
},
),
);
}
Widget _buildImageList() {
return Center(child: Image.network(imgUrl.value));
}
Среда
Flutter 3.16.0
get: ^4.6.6
firebase_core: ^2.21.0
firebase_database: ^10.3.2
firebase_storage: ^11.5.2
Я проверил, что URL-адрес хранилища Firebase извлекается правильно. Кроме того, я проверил код на наличие ошибок, но не смог определить основную причину проблемы.
Буду признателен за любые рекомендации и предложения по решению этой проблемы. Если мне что-то не хватает или есть лучший способ получения и отображения изображений из Firebase Storage с помощью GetX, дайте мне знать.