Flutter: изображение не отображается, несмотря на правильный URL-адрес хранилища Firebase и шаблон MVC с GetX

Я столкнулся с проблемой в своем приложении Flutter, когда я пытаюсь отобразить изображение, полученное из хранилища Firebase. URL-адрес хранилища Firebase извлекается правильно, но изображение вообще не отображается в моем приложении.

Обзор кода

Я реализовал шаблон MVC, используя пакет Get (package:get/get.dart) в моем приложении Flutter. Соответствующий код включает в себяFirebaseStorageServiceclass() для получения 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, дайте мне знать.

0 ответов

Другие вопросы по тегам